Per-page changes with mystique theme
-
Hi,
Is there a way to make per-page changes using the custom css functionality? I’m using Mystique and want to make the static front page (and only the front page) a little different but can’t see anyway for my css to only target the front page?
Am I missing something or is this not currently possible? Or is it theme dependent?
Thanks,
Adam.The blog I need help with is: (visible only to logged in users)
-
The site linked to your username, adam.shand.net, is not a wordpress.COM site. We need a link to the site you are talking about.
The general answer though is… it depends on the theme and also what you are wanting to do. On some themes yes, it is possible to target and style individual pages.
-
the site i’m talking about is goodfornothingmovie.wordpress.com, unfortunately it’s still locked down at the moment because it’s not able to go live for another week or two.
i’m helping friends put together a site for their up and coming movie release and what they want on the front page is just the nav bar and trailer video “floating” on top of the background. should be doable by setting the opacity but in mystique i can’t see anyway to do that for one page but not another.
side question, why does the form ask me which website i’m asking a question about yet not put that information somewhere that other people can see it?
-
If you look at the opening body tag in the source code for a page using Mystique, you will see a list of CSS classes such as home and blog.
You can target CSS changes for the main (home) by preceding the selector for the element you are styling with .home such as this:
.home #container
or
.home #sidebar -
-
-
Thank you very much, this worked a charm. There were a few other bits and pieces to figure out (like opacity inheritance) but over all it worked really well.
For posterity here is the CSS I’m currently using, the web site isn’t currently available but should be in the next few days at http://goodfornothingmovie.wordpress.com/ or http://goodfornothingmovie.com/
body {
background: url(http://goodfornothingmovie.files.wordpress.com/2012/01/shooting-location-mackenzie-country_27-south-island-new-zealand-in-good-for-nothing-medium.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% auto;
-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;
background-size: 100% auto;
}/* set opacity for main content pages, except … */
div#main {
background: rgba(255,255,255,.85);
}/* … for the page called “home” */
.home div#main {
background: rgba(255,255,255,0);
}/* make sure that embedded videos never get made translucent */
.youtube-player {
background: rgba(255,255,255,1);
}/* get ride of a section */
div#post-extra-content {
display: none;
}/* don’t use “background: rgba”, because here you actually need the opacity inheritance to make the ugly Facebook widget match */
div#footer {
opacity: .85;
} -
That is great, but in case you did not know, Internet Explorer does not recognize opacities with RGBA so IE users will just see solid colors.
You have to use special IE only filters, and there are 2 or 3 different ones you have to use to cover all versions of IE. A little googling for rgba and IE will get you the information you need to construct those filters.
-
Yep, I’d figured that out was just doing it the easy way for testing proof of concept. :-)
Thanks for the heads up though!
-
For right now, I’m sticking to creating repeatable PNG images with the level of transparency that I want to use. That works in virtually all browsers.
- The topic ‘Per-page changes with mystique theme’ is closed to new replies.
WordPress.com Forums 
