Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 29, 2013 at 5:57 pm #182168
    optizign13

    Hello, is it possible to stylize the tabs shortcode but only on one page? I’ve used tabs on other pages but would only like to remove some borders on a specific page.

    http://optizign.com/packages-2

    password: 12345

    October 30, 2013 at 1:23 am #182296
    Ismael

    Hi optizign13!

    If you want to change the style of a specific element on a certain page or post, you can use the Google Chrome Inspect Element. Look for the unique css body class.

    On the example above, the page’s unique selector is .page-id-2251. We can use it to change the element within that page. For example, if we want to change the header, we can use this on our Quick CSS field.

    .page-id-2251 #header_main {
border-bottom-width: 3px;
border-bottom-style: dotted;
background: red;
}

    Can you please post a screenshot of the changes you want for the tab?

    Best regards,
    Ismael

    October 30, 2013 at 1:37 am #182302
    optizign13

    Hi,

    I am not trying to change the tab I just want the page that someone is currently on to be highlighted within the drop down menu as well.

    For example if you go to http://optizign.org/sitepreview/personaltouchdental.com/our-office/

    the OFFICE page is highlighted at the top. What I need is for example, Letter Testimonials (Which is a drop down under the testimonials main menu, to be highlighted since I am on that page.

    http://optizign.org/sitepreview/personaltouchdental.com/letter-testimonials/

    November 1, 2013 at 12:03 am #183176
    Yigit

    Hi!

    It is highlighted actually but you have following custom css added 

    #menu-main-menu .sub-menu li a { font-weight: bold !important; }

    so it is not visible. You can add following code to Quick CSS to make font weight of sub menu items normal and active item will be in bold

    #menu-main-menu .sub-menu li a { font-weight: normal !important; }

    Best regards,
    Yigit

    November 1, 2013 at 12:07 am #183177
    optizign13

    Hi,

    I removed the bold and added the code above instead however the active links in the drop down are still regular…not bold.

    November 1, 2013 at 12:11 am #183179
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .current_page_item>a, .current-menu-item>a { font-weight: bold!important; }

    Regards,
    Yigit

    November 1, 2013 at 12:13 am #183181
    optizign13

    I’m sorry but that doesn’t appear to be working either…the top main menu item is bold yes but the item in the DROP down menu is not, when I am on the page.

    November 1, 2013 at 12:17 am #183185
    Yigit

    Hi!

    Sorry, my bad, this code

    #menu-main-menu .sub-menu li a { font-weight: normal !important; }

    should be 

    #menu-main-menu .sub-menu li a { font-weight: normal; }

    !important prevents active menu item to be highlighted

    Regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Tabs Styling’ is closed to new replies.