Widget-title

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #19580
    Vanthogvanthog
    Participant

    Hi

    The updated version of Peak theme has made building page layout much more intuitive – a great improvement – thanks.

    I’m working on a new page where I changed the CSS on the .widget-title
    screenshot2
    but I’m at a loss how to move the short underline under the text to the middle of the column – the new position as the text.
    Screenshot001

    Also all pages with .widget-title have of course changed as well how do I make the CSS changes specific to a new page and not universal.
    I know that you can change footers by naming the section
    e.g. #sidebars-footer .widget-title
    can the same be done for a new page?
    i.e. Change the title formatting on say the About US page in Custom CSS by writing the page name before the .widget-title
    e.g. #About-Us .widget-title
    Thanks for your help
    Gerry

    Attachments:
    #19597
    VeenaVeena
    Moderator

    Pls share a link to the specific page then we will be able to provide you the required custom CSS .

    Also all pages with .widget-title have of course changed as well how do I make the CSS changes specific to a new page and not universal –
    You need to specify the id of that particular page/post.
    For eg:

    .page-id-13174 #sidebar-footer1 .widget-title {
        color: #24D3C5;
    }
    

    http://www.wpbeginner.com/beginners-guide/how-to-find-post-category-tag-comments-or-user-id-in-wordpress/

    #19610
    Vanthogvanthog
    Participant

    Thanks Phoenix – got the idea about page-id for keep CSS changes to a specific page.

    The other problem about the moving the underscore with the Text when the text is centered using CSS e.g. see screenshot – when I move the Categories text to the middle of the page the underscore remains on the left handside. I do not know what CSS code to write to move the underscore to join the text in the middle.
    What is the underscore (short line) called in the .widget-title?
    I am developing the website on localhost

    screenshot

    Thanks

    Attachments:
    #19634
    VeenaVeena
    Moderator

    Actually it is a :after psuedo element .
    This is the CSS we have used –

    .widget-title:after {
        content: "";
        display: block;
        border-bottom: 1px solid #aaa;
        width: 35px;
        height: 12px;
    }
    
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Peak Theme Support’ is closed to new topics and replies.