How to change the style for a particular page title?

  • Resolved mikenet7482

    (@mikenet7482)


    8 years, 5 months ago

    I’d like to use a built in CSS editor (if possible) to center the title of my gallery page as seen here….

    https://www.dropbox.com/s/cldb1146fb3keo6/Gallery%20unaligned.PNG?dl=0

    I don’t know how to target a particular page though, I see lots of help online about how to work with the homepage title but how would I go about centering the title for my Gallery page?

    I’m exhausted looking for the right php file to look at in my theme but would try again if necessary. I was thinking that I could just use the custom CSS field in the theme to have it style a page title that way if I could tell the theme which page to target. Any ideas or other suggestions?

Viewing 15 replies - 1 through 15 (of 18 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Look at the <body> tag for a given page. The will be class identifiers specific to the page if your theme is properly written.

    Hie mikenet7482,
    You have to target page.php in order to make changes to page layout.
    You can also use css to do so.
    Please check once if your page is not using any custom-template. If so, you have to make changes to that template file.
    Hope this information help you.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    cedcommerce is not necessarily correct — modifying PHP is last resort.

    Thread Starter mikenet7482

    (@mikenet7482)

    Thanks for the replies everyone, this has bee a hard one for me.

    Sterndata, I don’t know what to look for, I used web inspector to find this there are a lot of things under body…

    https://www.dropbox.com/s/nk44ho8fwukk9ox/Page%20inspector%20for%20gallery.PNG?dl=0

    Maybe you know what I should use from here?

    I wouldn’t know what file to edit either, I feel that my theme uses h1 for a logo, it seems to be structured a bit different from other themes from what I hear but I can’t get help from the theme designers.

    Could it work to use the themes custom CSS field for this?

    I was told that this may target a page….

    <?php if(is_page(‘Gallery’)) : ?> <div class=”flex-container”> <?php endif;?>

    If so I don’t know how to add the styles with it or where to put that line to begin with, so I’m lost.

    ———–

    Cedcommerce

    The template where I created the page is set to (one column, no sidebar) and the theme folder has a template-onecolumn.php

    https://www.dropbox.com/s/35jnr9u3i4hehtr/template-onecolumn.php?dl=0

    I haven’t tried messing with this but have tried editing to the content-gallery.php with no luck.

    Two other things to note:

    I was told that the theme may be doing certain things dynamically.

    And I have the wp-image-borders plugin activated, its a plugin that adds borders to your images, I doubt that matters because the gallery is still created in WordPress normally.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    <?php if( is_page('Gallery') ) { ?> <div class="flex-container"> <?php } ?> is the way to write that.

    but why?

    You started out asking about how to apply a style to a particular page. That is done with body classes.

    Thread Starter mikenet7482

    (@mikenet7482)

    I’m not sure, I was just showed that. I’ll do anything that works, I do want to style a particular page. To start with just centering the title on my gallery page.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Look at the body tag for that page.

    Please post a link to your site.

    Thread Starter mikenet7482

    (@mikenet7482)

    At some point I was thinking of perhaps a couple other things with the page but if I can’t get something simple like title centering to work I’m in trouble as far as any hope of editing the Gallery page. If body classes is the way to go id need to know what to type, and if it can go in the CSS field, if not I’ll provide any information I can to find the right files to edit.

    Thread Starter mikenet7482

    (@mikenet7482)

    https://www.dividedifnotunited.com/?page_id=109

    I looked at the body tag, if I remember right it had a lot under it so I got a bit confused. It was in the dropbox pic I shared.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    <body class="page page-id-109 page-template page-template-template-onecolumn page-template-template-onecolumn-php custom-background">

    So if you want to style something just for this page, you’d add .page-id-109 to the CSS to restrict the style to just this page.

    Do not edit your theme’s files. Install the plugin “simple custom CSS” to add CSS for the site.

    Thread Starter mikenet7482

    (@mikenet7482)

    Thanks man, I’ll install it.

    You wouldn’t mind giving me an example of .page-id-109 used in a functional way would you? I think I know what to do but want to be sure.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    the page title is centered, so I’m not sure what the issue is.

    Thread Starter mikenet7482

    (@mikenet7482)

    https://www.dropbox.com/s/b8pn8atu9cf4uyi/Gallery%20not%20centered%20example.PNG?dl=0

    You may be thinking of the header title, that’s fine, it’s actually part of the header image but you see where it says Gallery in the upper left in the pic? That’s what I’m wanting centered.

    Thread Starter mikenet7482

    (@mikenet7482)

    Would I be doing something like this…

    .page-id-109 {
    text-align: center;
    }

    where .page-id-109 as the identifier goes before the bracket, then the properties on the inside. At the very least that example is missing a way to signify the title. Perhaps this goes in there somewhere as well?…

    <h1 class=”entry-title”>Gallery</h1>

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    .page-id-109 h1.entry-title { text-align: center; }

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘How to change the style for a particular page title?’ is closed to new replies.