Home Forums Weaver Xtreme Theme How to format Author Bio

Topic Resolution: Answered

This topic contains 17 replies, has 3 voices, and was last updated by  scrambler 2 months ago.

Viewing 16 posts - 1 through 16 (of 18 total)
  • Author
    Posts
  • #56704
    Answered

    Inga
    Participant
    • I would like the title “Author Bio” to be smaller (different heading level?)
    • I would like the typeface to be smaller than the body typeface.
    • I would like to see less space under the “About Author” heading, but I think that might resolve itself by specifying a different heading.
    • I would like the bio to extend the width of the page, just like the post itself.

    I can’t find how to do that. I assume it would have to go into Custom CSS rules. I am using Weaver Xtreme Pro.

    See bottom of this page for what I want to change: http://ssnet.org/blog/causes-of-disunity-hit-the-mark/

    #56705

    scrambler
    Moderator

    I don’t see any “author Bio” Title, just “about Curtis Hall” is that what you mean?

    That text can be target with a rule like below for font and space under (placed in the Theme Global Custom CSS Rule box)

    .author-title {font-size:1em;margin-bottom:.2em;}

    To make the bio the same width, use the rule below

    #author-info {paddig-left:0;padding-right:0;margin-left:0;margin-right:0;}

     

    but I also see a lot of garbage in the post footer area (below)

    var _gaq = _gaq || [];
    _gaq.push([\’_setAccount\’, \’UA-26979136-1\’]);
    _gaq.push([\’_trackPageview\’]);
    (function() {
    var ga = document.createElement(\’script\’); ga.type = \’text/javascript\’; ga.async = true;
    ga.src = (\’https:\’ == document.location.protocol ? \’https://ssl\’ : \’http://www\’) + \’.google-analytics.com/ga.js\’;
    var s = document.getElementsByTagName(\’script\’)[0]; s.parentNode.insertBefore(ga, s);
    })();

    #56707

    Weaver
    Keymaster

    I don’t think that is garbage, but some JS from some plugin.

    @Inga –

    I’m not sure how well you know CSS, but taking a bit of time to understanding how to use your browser’s development tools to find the sections you want to fix/customize and the CSS classes they use can go a log way to getting the exact look you want.

    For the most part, the basic HTML structure of Weaver Xtreme is not all that far off of Weaver II, so if you are having trouble finding the equivalent options in Weaver Xtreme, simply going straight to custom CSS can be easier. Most of the hints @scrambler has provided to you during your conversion can often easily be discovered with a basic use of the browser developer tools. Takes a few hours to get the hang of the tools, but can lead to huge benefits when needing to really customize elements.

    All the specification you asked about in your original question for the author info have some variant of an “author-whatever” class that are easily discoverable with the browser tools, and can be changed with custom CSS rules. If you haven’t spent some time trying to learn these tools, you might find it is very productive, and even fun (well I find it fun) to tweak finer elements of your layout.

    #56708

    scrambler
    Moderator

    I don’t think that is garbage, but some JS from some plugin.

    I know, but what I meant is that it is showing up as text on the page which is obviously not the intended use

    #56709

    Inga
    Participant

    Thank you both for your advice.

    @weaver: Which browser tools do you recommend .. i.e. which browser? I don’t have time for more experimenting than necessary. I do understand the “fun” when I have time. But that element is scarce right now. (My husband thinks I play all the time when I work on the computer!!!)

    With WordPress, I don’t need to write much code, so the little I knew, I pretty much forgot. With our HTML pages, I know how to look up what I need to know, but with WP, I don’t know the names of the elements I want to modify. So <sigh> I think I’ll have to do what Bruce suggests. Thus my question: Which browser do you use/recommend?

    @scrambler
    Particular thanks to you for the specific code *and* for noticing that the Google tracking script (I think) is showing up at the bottom of the page, rather than where it’s supposed to be. Not sure Google recognizes it there. It worked fine in Weaver II Plus, where I put it, but I hadn’t noticed that it wandered to the bottom of the page in Xtreme. (Don’t remember where it was in the previous theme.) So where’s the best place to put it now?

    #56710

    Inga
    Participant

    I remember now where that Google tracking code was. Google wants it to be at the bottom of the page. Weaver II Pro had an option to place code below the footer. That’s where I put it, and it didn’t show up on the public site, but it showed up for Google.

    #56711

    scrambler
    Moderator

    If you insert a script in an HTML area, it must be inside a proper script tag.

    All browser have similar developer tools accessed with F12 or right-click > inspect element.

    Below is an article on the subject

    https://guide.weavertheme.com/basic-tips-on-using-the-developer-tools-like-firebug-to-resolve-styling-issues/

     

    #56712

    Inga
    Participant

    What appears to show up is the full Google Analytics tracking code *except* for the enclosing <script> tags, which seem to have gotten lost in transition. 

    #56713

    Inga
    Participant

    Okay, I checked, and this is currently in the
    Advanced Options/HTML insertion/<>Post Footer:

    <script type=”text/javascript”>
    var _gaq = _gaq || [];
    _gaq.push([‘_setAccount’, ‘UA-26979136-1’]);
    _gaq.push([‘_trackPageview’]);
    (function() {
    var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
    ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
    var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
    })();</script>
    <script src=”//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=924c9c94-9d69-4c33-8863-73a113de2e98″></script>

    That’s the Google Analytics tracking code and code from Amazon. Both are enclosed with <script> tags. What am I missing?

    I disabled Litespeed cache to check if that would make a difference, and it didn’t.

    #56714

    Inga
    Participant

    Thanks for the links to how to use Developer Tools. A little instruction might help. 🙂

    #56715

    scrambler
    Moderator

    There must be some typo breaking the syntax in the script tags

    make sure the double quotes are the same, as when you copy paste code with double quotes, they some times get converted to invalid one (like in your post)

    #56736

    Inga
    Participant

    So, to make sure I’m reading you correctly:
    The code is in the correct place and I just need to check the details of the actual code?

    #56737

    scrambler
    Moderator

    You can insert scripts in any HTML area,.

    Depending if it needs to run at the beginning of the page load or at the end, which one may matter.

    But the fact the script shows up as text on the page means there is some syntax error in the code, likely the script tags as it behaves as if there were none

    #56738

    Inga
    Participant

    Back to the Author title and description.

    @scrambler: I used the code you provided, and it didn’t seem to make a difference:

    .author-title {font-size:1em;margin-bottom:.2em;}

    #author-info {padding-left:0;padding-right:0;margin-left:0;margin-right:0;}

    Using Firefox Developer Tools (thanks for the reminder!), I tried various options.

    I used “Save settings” and saw the message “Settings saved.” I make sure all server and browser caches are purged. Yet I saw no changes – not even for the settings marked !important.

    It doesn’t seem to be “taking.” I viewed the page in other browsers and still don’t find the expected results. See http://ssnet.org/blog/causes-of-disunity-hit-the-mark/

    Later: I currently have this code in Custom CSS:

    #author-info {padding-left:0 !important;padding-right:0;margin-left:0;margin-right:0; font-size:80%;}
    .author-title {font-weight:normal !important; margin-bottom:.1em;}

    But that’s not what shows up in the Developer Tools. In fact nothing that I manually put in Custom CSS seems to make a difference. However, when I make CSS changes in the rest of the interface, it shows up in the “Custom CSS” code, and it does make a difference in the appearance on the public site. 

    Is it just me, or is there a fault in the theme that the manual entry in Custom CSS currently doesn’t “take”?

     

     

     

    #56739

    Inga
    Participant

    @scrambler: I checked again, and the <script> tags were, indeed, missing. But I thought I copied the code directly from the Post-Footer HTML insertion area earlier .. .
    I inserted the code with the correct tags now, and it seems to be working.
    Thanks again for drawing my attention to this.

    #56747
    Best Answer

    scrambler
    Moderator

    This reply has been accepted as the best answer.

    That is usually because there is a syntax error in the Custom CSS.

    I do see one that breaks the CSS file. Below the closing comment has a space between the * and the /  which is wrong(in yellow). As a results all the rules after are ignored and treated as comments, including yours.

    You need to correct that and remove the space

    /* .single #primary-widget-area {display:none;} * /

    should be

    /* .single #primary-widget-area {display:none;} */

    @weaver, is that custom CSS hers or yours from the subtheme? because if yours it may need to be fixed in the sub theme

Viewing 16 posts - 1 through 16 (of 18 total)

You must be logged in to reply to this topic.