Need help? Check out our Support site, then


Can we have different CSS styles for different pages?

  1. Hello! I am trying to create a site that simply has the site title on the home page, nothing else at all. The title would act as a link to the next page, where the menu would be. Is this possible on WordPress.com? Thanks!

    The blog I need help with is robertsjo.wordpress.com.

  2. PS: This is for a new site, not the robertsjo one mentioned above.

  3. Where exactly is this site? Please post an active URL starting with http:// so we can provide an accurate answer.

  4. At this point it's more a theoretical question, to figure out if this would be possible with WordPress.com rather than .org. Thanks!

  5. I'll tag this thread and it will be moved to the CSS forum where you can get an answer to your question.

  6. Thanks!

  7. You're welcome.

  8. Yes it's possible, even without the Custom Design upgrade.

  9. Great! Is there a page you can link me to showing how?

  10. No, but I can show you how, if you mean a no-upgrade solution. But in that case the thread shouldn't be in the CSS forum.

    If you mean a CSS-upgrade solution, you must first decide which theme you're going to use (because CSS editing is theme dependent) then probably wait for a staff reply.

    In both cases you need to give more details. You mean a blank splash page? what color? With the title positioned where? what size and color? "Next page" would display what? your latest posts?

    But before you tell us any of this, I'm curious: what's the use of such a page?

  11. Thanks, justpi!

    I do have the custom upgrade.

    I'll be using Toolbox. I've already sorted font and colour.

    I'd like the name of the site in the middle of the page, as a link to the next page, which will give the menu.

    I'm tinkering about with this for a friend who is an artist. This is how she'd like to do it. The menu would lead viewers to different categories of her work.

  12. You're welcome. But "this is how she'd like to do it" isn't reason enough: better tell your friend that her idea is nothing but a useless extra click.

  13. I agree it wouldn't be everyone's cup of tea, but she thought about what she'd like from looking at other similar websites, and that's what she'd like me to do.

  14. You can look at the class names of HTML elements in order to target certain types of pages. For example, the home page has a class name of "home" which you can see if you look at the page source. So if you put ".home" in front of your CSS selectors, then they will only affect the home page.

    You can't add links using CSS only, but you can use CSS to change the appearance of links that area already on the page so that's what you'd need to do if you wanted to hide everything else but keep one line on the home page. Also note that CSS like this is theme specific.

    Blaskan is a great theme. Good choice!

    Here is an example I put together to illustrate how your idea could work on the Blaskan theme. Note that I've prefixed every selector with ".home" to just select the home page. I've also used ".home #nav li.menu-item-114 a" to target the 2nd link in the menu as the one to keep. I just picked on at random, if you wanted a different link, you should look at the page source, find the code for the menu, and change out the ".menu-item-114" part of the string with the class of the menu item you would like to keep. This example should also give you an idea of what kinds of things you can customize and hopefully it will put you on the right track to do a little experimenting on your own. :)

    .home #header figure,
    .home #site-name,
    .home #content,
    .home footer,
    .home #nav li{
    	display: none;
    }
    .home #header {
    	border: none;
    }
    .home #nav li.menu-item-114 {
    	display: inline-block;
    	margin: 0 auto;
    	float: none;
    }
    .home #wrapper {
    	width: 100%;
    	text-align: center;
    	margin-top: 9em;
    }
    .home #nav li.menu-item-114 a {
    	background: none;
    	border: 0;
    	color: #000;
    	font-size: 64px;
    	text-shadow: none;
    	text-transform: capitalize;
    }

    Note that the next of whatever link you pick to keep for the home page in an example like this would be adjusted via the Appearance → Menus page.

  15. I'm kinda interested to see how it turns out! You should post back here with an update when you're done. :)

  16. Many thanks, designsimply! My query isn't about my current website, though, it's for another one. I'll be using Toolbox. How would this affect the CSS you've suggested?

  17. Doh. :) It would be totally different, but the part about targeting the home page using a ".home" at the beginning of each selector would be the same.

    Try setting up a test site using Blaskan and try out the CSS I posted in a preview. It should give you a good idea for how things work and then you'll have a good base for giving it a try with Toolbox on your own.

Topic Closed

This topic has been closed to new replies.

About this Topic