Home Forums Weaver Xtreme Theme Formatting post titles differently, depending on where they appear

Topic Resolution: Answered
Viewing 16 posts - 1 through 16 (of 21 total)
  • Author
    Posts
  • #69205
    Answered
    GeorgeW
    Participant

    Hello,

    I have made some CSS tweaks to the H2 tags.

    You can see them in the subheads (which are H2), on a page like this:

    Exposed: The product review hoax

    The problem is this formatting propagates on other parts of the site:

    Homepage post titles:

    https://3000reviews.com

    Sidebar post titles:

    Product review 1

    Is there a way to strip away this formating, or use a different one, depending on where those H2 tags appear? For example, with a “widget title class” or something similar?

    Btw, I absolutely love the Weaver Xtreme theme!

    #69206
    scrambler
    Moderator

    Css allows you to add selector to any rules to target specific content.

    In order for me to help, I need specifics.

    Are you trying to make changes to specific content you create, or to make the change affect certain section (like widgets), or pages.

    Once we know what defines the target, we can elaborate on the CSS selector(s) to use

    #69214
    GeorgeW
    Participant

    Hi, scrambler…

    I have already made changes to specific elements of the site. For example, I added this to the h2 tags:

    h2 {
    padding: 0.3125em 0;
    margin: 0 0 0.3125em;
    border-left: 0.3em solid #246796;
    margin-bottom: 1.0em;
    padding-left: 1.0em;
    font-size:150%;
    color: #246796;
    }

    But I want this to be applied ONLY to the h2 subheads inside posts and pages. Like this:

    Exposed: The product review hoax

    I do NOT want this to be applied to links inside the sidebar widgets.

    Similarly, I have made the post titles bold.

    But I do NOT want this to be applied to links inside the sidebar widgets, or to the linked titled posts on the homepage.

    Is there a way for me to do something like this:

    h2 {
    padding: 0.3125em 0;
    margin: 0 0 0.3125em;
    border-left: 0.3em solid #246796;
    margin-bottom: 1.0em;
    padding-left: 1.0em;
    font-size:150%;
    color: #246796;

    [magic css code that applies the above only to the h2 tags inside a blog post]

    }

    Sorry if my post is a bit confusing.

    Thanks!

    George

    PS. An alternative may be to separately style individual assets like:

    • Links in sidebar widgets
    • Links in blog-post pages (homepage).

     

    #69220
    scrambler
    Moderator

    If you only want to affect h2 in the content area, replace the selector

    h2

    by

    #content h2

     

    #69232
    GeorgeW
    Participant

    Thank you scrambler.

    I did this and it did help somewhat.

    It removed the left blue border from the sidebar widgets, which is good.

    My problems still are:

    1. The sidebar post titles are still bold with left blue border.
    2. The post titles on the homepage are still bold with left blue border.

    Can anything else be done?

    I appreciate your time and patience.

    Thanks,

    George

     

    #69233
    scrambler
    Moderator

    The Post titles are bold because you have done this 2 different ways

    • You set option for post title to be bold
    • You entered a rule in the CSS+ box to do it
      .wrapper .post-title a,.wrapper .post-title a:visited {font-weight: bold;}

    The sidebar titles still have a left border because you still have a Custom CSS generic rule doing that

    h2 {
    padding: 0.3125em 0;
    margin: 0 0 0.3125em;
    border-left: 0.3em solid #246796;
    margin-bottom: 1.0em;
    padding-left: 1.0em;
    font-size:150%;
    color: #246796;
    }

    So go through all your theme options, CSS+ boxes, and Custom CSS File with a comb 🙂

    #69234
    Private Reply
    GeorgeW
    Participant
    This reply has been marked as private.
    #69235
    scrambler
    Moderator

    Must have been a cache issue

    2) post titles where? Single post page (then use the theme page title font option) or blog page (give a link), or both

    3) Change the selector from

    #content h2

    to

    #content .entry-content  h2

     

    #69240
    Private Reply
    GeorgeW
    Participant
    This reply has been marked as private.
    #69242
    scrambler
    Moderator

    Add the rule below

    .single h1.page-title {font-weight:bold !important;}

     

    #69243
    Private Reply
    GeorgeW
    Participant
    This reply has been marked as private.
    #69245
    scrambler
    Moderator

    The rule I gave you is NOT responsible for that  as it only affect h1 post title, and the post title in your sidebar are h2s.

    As I said before, the post title in your sidebar are bold because of a CSS+ rule

    /* CSS+ Rules */
    .wrapper .post-title a,.wrapper .post-title a:visited {font-weight:bold;}
    #author-info {border: 1px solid #07D900;}

    CSS+ rule are rules you put in the CSS+ box next to an option.

    That CSS+ rule should be coming from the Post Title Text Color CSS+ box

    (I told you to scrub…)

    #69258
    Private Reply
    GeorgeW
    Participant
    This reply has been marked as private.
    #69260
    scrambler
    Moderator

    The CSS is no longer in your theme global custom CSS rule box. If you see that rule in your Them Global Custom CSS Rule box, then something is broken

    Are you by any chance using an optimization plugin for JS and CSS, or an optimization option in an existing plugin like jetpack?

    If so, you need to deactivate that as it is known to break the theme js and CSS.

    If unsure, deactivate ALL non weaver plugin and see if things start working again, if so deactivate one by one.

    If you have a Cache plugin or cache service like Cloudflare, clear and deactivate that

    #69265
    Private Reply
    GeorgeW
    Participant
    This reply has been marked as private.
    #69266
    scrambler
    Moderator

    “Once I did that, I noticed the “Shortcode” widget that included the code [show_posts filter=default] had been removed from the Primary Sidebar (Is this standard WordPress behavior?)”

    Wordpress will sometimes lose widget allocation. they are usually not lost must moved in the unused widget section, and you just need to move them back.

    Doing a child theme is not the solution, if something is corrupting the theme CSS we need to figure it out or you may get more issue that you wont catch nut users will suffer from…

    This is what the web page list as the current Custom CSS, and it does include our h2 rule at the end, but corrupted with the biggest first part missing (includingthe open curly bracket (yellow highlight)

    Note: Unrelated, but you are also missing the unit on the border highlighted in orange.

    /* CSS+ Rules */
    #author-info {border: 1px solid #07D900;}

    /* Global Custom CSS Rules */
    /* Custom CSS rules for Ajax Subtheme */
    .page-title{border-bottom: 0px solid #07D900;} /* add a bottom line to page titles */
    #container .post-title{border-bottom: 0px solid #07D900;} /* same for post titles */
    h3.widget-title{border-bottom: 0px solid #07D900;} /* matching for widget titles */
    h3.widget-title{padding-bottom: 20px;} /* matching for widget titles */
    .more-msg {background:#D1FFE2; border:1px solid green;padding:2px 5px;margin-left:20px;} /* make the Continue Reading boxed */

    .error404 .entry-content div:nth-of-type(2), .error404 .entry-content div:nth-of-type(3), .error404 .entry-content div:nth-of-type(4) {display:none;}

    .atw-show-posts-filter-default article > span {display:flex;flex:0 0 25%;border:1;margin:0 3% 0 0;}
    .atw-show-posts-filter-default .featured-image {float:left;width:24%;margin:0 3% 0 0;}
    .atw-show-posts-filter-default .entry-header {float:right;width:73%;}
    .atw-show-posts-filter-default .entry-header .post-title {font-size:1.2em;}
    .atw-show-posts-filter-default .post {border-bottom:1px solid #dbd6d4;padding-bottom:10px;}

    .atw-show-posts-filter-new article > span {display:flex;flex:0 0 25%;order:1;margin:0 3% 0 0;}
    .atw-show-posts-filter-new .featured-image {float:left;width:24%;margin:0 3% 0 0;}
    .atw-show-posts-filter-new .entry-header {float:right;width:73%;}
    .atw-show-posts-filter-new .entry-header .post-title {font-size:1.1em;}
    .atw-show-posts-filter-new .post {border-bottom:1px solid #dbd6d4;padding-bottom:10px;}

    li{
    margin: 10px 0;
    }

    .category-title-label{display:none;}

    .more-msg {display:none;}
    .excerpt-dots {display:none;}

    .wp-block-embed-youtube .fluid-width-video-wrapper {position:absolute !important;top:0px;}

    #content .entry-content h2
    color: #246796;
    }
    /* End Weaver Xtreme CSS */

    So check your Custom CSS Rule box, and if the rule is complete there with no errors do the following.

    1. Paste here the content of your custom CSS Rule box.
    2. Paste here the content of your System Info box in Main Options > Theme Help
    3. Also, you did not explain in detail what you did with the Plugins. You did say that when you deactivated all of them, the rule came back, but later disapeared.
      Can you please redo the plugin procedure below and pay attention to the details.

      1. Deactivate ALL non weaver plugins, see if the style from the rule comes back
      2. If it does, reactivate One by one and test the site in between each activation to see if the rule disappears. If it does note which plugin you had just reactivated.
Viewing 16 posts - 1 through 16 (of 21 total)
  • You must be logged in to reply to this topic.