css for header section on one page only?

ChancyRat · January 24, 2014

Is this possible? I saw someone provided code to affect just one text box on a page, so I'm hoping there css can apply to the header section only on one page. Thanks.

Allen · January 24, 2014

Every page has a class name, look in the of the page source. I use it to
change the header logo for specific pages.

.sm-page-node-######

Allen · January 24, 2014

The biggest problem with customizing is that pages do not carry the classes of their parents.
folder > folder > gallery
Legacy did have this which allowed flow down like for a whole category and all it's sub-cats and galleries.
They've forced us to now customize every single page.

ChancyRat · January 24, 2014

Allen wrote: »

Every page has a class name, look in the <body ... > of the page source. I use it to
change the header logo for specific pages.

.sm-page-node-######

Oh Allen you SO want me to be able to do this more than I can. Your carrot is about 100 miles out of my reach in some direction I cannot determine. I am looking at the page source and still don't know what I should pull out.

You did inspire me to find that text block thread, and it is here http://www.dgrin.com/showthread.php?t=244394 and you gave this code:

Try this in CSS
.sm-page-widget-4544024 {
background: rgba(22, 22, 22, .20);
border: 1px solid #666;
}

I see these.

sm-page-widget-bptfxXFf [arbitrary choice as I don't know how to locate the real one]
sm-page-widget-header [has no id number - nothing with header in it has an ID number]

And so I'm stumped.

Allen · January 24, 2014

What do you want to do with the header section on just one page?

ChancyRat · January 24, 2014

Thank you Allen. I would like to add a background color with transparency.

And the reason for that is because on some pages I have added a background image in the CSS. When I do that, this happens:
- The image starts at the top of the browser window
- thereby overtaking/masking the top navbar
- but as far as I can tell I can't force a background image to start below the navbar when the css for that has repeat in it.
- and trying a fix that creates a large background image where the top section is transparent with color so as to let the navbar show, causes (a) slow page load times and (b) the section made transparent does not function the same in all browsers, and is basically a mess as a result.

So I was hoping to be able to apply a background color and transparency to individual page headers.
Right now on my site I have set the header in the main theme to have color and transparency, which is working, but I don't like it on the home page or on most pages. I only want it on some pages where I customize the background image.

This is the page I worked on where I like how the header looks, color wise. But not for my entire site:
http://www.joinrats.com/ModifyBehavior/PositiveReinforcement/Method/i-FDTsTBb

Allen · January 24, 2014

For this single page this is the box/part with the breadcrumb and menu.

.sm-page-node-F9PXg .sm-page-layout-region-top

ChancyRat · January 25, 2014

Allen wrote: »

For this single page this is the box/part with the breadcrumb and menu.

.sm-page-node-F9PXg .sm-page-layout-region-top

barb

I got it on the FIRSSTTT TRYYYYYY!!!!
I was revved up to spend 24 hrs on this.

barb

/* Add personal background image */
html.sm-user-ui {
background-attachment: scroll;
background-image: url(/photos/i-xdSmnWP.png);
background-position: 0px 0px;
background-repeat: repeat;
background-size: 88%;
}

.sm-page-node-F9PXg .sm-page-layout-region-top {
background: rgba(255, 243, 193, .80);
border: 1px solid #666;
}

Oh Allen you are breathtaking.

I have physically located the whereabouts of these codes in the page source so that I can find them on other pages.

What would I need to add to have the color I added to the header, span the entire browser window? Instead of being stuck at 960 px? My site settings are Fixed to 960 (and header width was set to auto). I tried changing it to Stretchy and then fixing the body width to 960. This did allow the color on the home page header to stretch to infinity, but the header on all other pages stayed fixed to 960. Currently I put the setting back to Fixed at 960px and Header to auto.

Can I pretty please have the .sm particular for the area of the gallery that is the thumbnails and main photo (including captions and keywords below the main photo)?

I could have sworn that by clicking an area of the gallery, I should be taken to the code numbers for it in Web Developer, but no amount of tweaking to enable that function is working for me.

Allen · January 25, 2014

You might be able to set the page to stretch then set the width for each box below.

width: 960px;
margin: 0 auto;

ChancyRat · January 25, 2014

Allen wrote: »

You might be able to set the page to stretch then set the width for each box below.

width: 960px;
margin: 0 auto;

Thank you - yet - what you do mean set the page to stretch? Where would I do that?

Also - if I could ask - not sure you saw this request: Can I pretty please have the .sm particular for the area of the gallery that is the thumbnails and main photo (including captions and keywords below the main photo)? Here is an example of why I ask for this code. I'm not sure this graphic will remain at all, but you can see the idea, that I need to mask over the section of thumbs, main image, and caption:
http://www.joinrats.com/Enrichment/Bandaids/i-6JShLcW

Allen · January 25, 2014

ChancyRat wrote: »

Thank you - yet - what you do mean set the page to stretch? Where would I do that?

Also - if I could ask - not sure you saw this request: Can I pretty please have the .sm particular for the area of the gallery that is the thumbnails and main photo (including captions and keywords below the main photo)? Here is an example of why I ask for this code. I'm not sure this graphic will remain at all, but you can see the idea, that I need to mask over the section of thumbs, main image, and caption:
http://www.joinrats.com/Enrichment/Bandaids/i-6JShLcW

.sm-page-node-d6NG7 makes it this gallery only, can be removed.

.sm-page-node-d6NG7 .sm-gallery-smugmug {
background: red;
padding:10px 20px 0 0; /* top R bot L */
}

ChancyRat · January 25, 2014

Allen wrote: »
.sm-page-node-d6NG7 makes it this gallery only, can be removed.
.sm-page-node-d6NG7 .sm-gallery-smugmug {
background: red;
padding:10px 20px 0 0; /* top R bot L */
}

barb

I keep starting to type thank you but then erupt into more

barb

Then I try to type again and I have to jump and try another gallery.

barb

Here's a different example: http://www.joinrats.com/Intros/IntroNotesPulman/i-SGLCbGB

AHAHAHAH

barb

barb
I wish I could calm down. Sorry. :ivar:ivar:ivar

Okay. Back to business. Could you share what you meant about how to make the header stretchy?
What I have tried:
- default that I tweaked was Site 960 px, header auto.
- Tweak was to change site to stretchy and body to 960 px. This succeeded in letting the home page header be stretchy, but none of the galleries were (this was when i set the color of the header in the main theme settings).

You said, "You might be able to set the page to stretch then set the width for each box below."

How would I set the page to stretchy?
Then, all the boxes are set to strict widths. Only the SM gallery style is something I want to remain fixed as well.

Thanks.
Okay back to screaming

D

ChancyRat · January 28, 2014

Bring the top navbar submenus back to the front
I discovered that IE8 cannot handle background color and transparency well.
I add code that brings them to life on IE8, but there is a negative effect: on other browsers the topnav submenu dropdown links are put to the back. An example gallery:

http://www.joinrats.com/Enrichment/Stashing/i-TmkvNFG

Here is the code and the image is what I see on FF 26 and Chrome.
On IE8 the color, transparency, and dropdown menu behave properly.

How can I bring back the top dropdown menus to the front?

/* Add personal background image */
html.sm-user-ui {
background-attachment: scroll;
background-image: url(/photos/-B2bcTXZ.png);
background-position: 0px 0px;
background-repeat: repeat;
background-size: 50%;
}

/* Add color and transparency to header */
.sm-page-node-37nS7 .sm-page-layout-region-top {
background-color: rgb(252, 244, 210);
background-color: rgba(252, 244, 210, .90);
border: 1px solid #666;
opacity: 0.9; 
filter: Alpha(opacity='90'); 
}

/* Add background color to SM style thumbs, image, caption, keywords */
.sm-page-node-37nS7 .sm-gallery-smugmug {
background-color: rgb(252, 244, 210);
background-color: rgba(252, 244, 210, .90);
opacity: 0.9; 
filter: Alpha(opacity='90'); 
padding:20px 24px 0 0; /* top R bot L */
}

As always,

Allen · January 28, 2014

Maybe add z-index:1; to top and then z-index:99; to menu?

Z-index acts something like layer levels.

ChancyRat · January 28, 2014

Allen wrote: »

Maybe add z-index:1; to top and then z-index:99; to menu?

Z-index acts something like layer levels.

Thank you Allen - where would I add these? Especially re: the menu. That would be in the theme-wide CSS, correct? I added it here

/* ==============================
   = TOP NAVBAR, SUB-MENU CODE  =
   ============================== */
/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
  font-family: 'Buda' !important;
  padding: 3px 5px 2px 5px !important;
  font-size: 14px !important;
  border: 1px solid rgba(161,203,223,0.9);
  border-bottom: 1px solid #A1CBDF !important;
  background-color: #FFFDE0 !important;
  z-index:99;
}

And for the other part, I added it on the page CSS as so:

/* Add color and transparency to header */
.sm-page-node-NX2Gs .sm-page-layout-region-top {
background-color: rgba(252, 244, 210, .90);
background-color: rgb(252, 244, 210);
border: 1px solid #666;
opacity: 0.9;                
filter: Alpha(opacity='90'); 
z-index:1;
}

This has not changed the behavior on any browser.
This is in a different test gallery: http://www.joinrats.com/Enrichment/Feathers/i-vrBFmqb

Allen · January 28, 2014

ChancyRat wrote: »
Thank you Allen - where would I add these? Especially re: the menu. That would be in the theme-wide CSS, correct? I added it here
/* ==============================
   = TOP NAVBAR, SUB-MENU CODE  =
   ============================== */
/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
  font-family: 'Buda' !important;
  padding: 3px 5px 2px 5px !important;
  font-size: 14px !important;
  border: 1px solid rgba(161,203,223,0.9);
  border-bottom: 1px solid #A1CBDF !important;
  background-color: #FFFDE0 !important;
  z-index:99;
}
And for the other part, I added it on the page CSS as so:
/* Add color and transparency to header */
.sm-page-node-NX2Gs .sm-page-layout-region-top {
background-color: rgba(252, 244, 210, .90);
background-color: rgb(252, 244, 210);
border: 1px solid #666;
opacity: 0.9;                
filter: Alpha(opacity='90'); 
z-index:1; [COLOR=Red]position: relative;[/COLOR]
}
This has not changed the behavior on any browser.
This is in a different test gallery: http://www.joinrats.com/Enrichment/Feathers/i-vrBFmqb

Add red
position: relative; z-index:1;

Have to set this before z-index will work.

ChancyRat · January 28, 2014

Thank you Allen. This code had the effect of fixing Chrome and FF, but now IE has the problem, the submenu goes to the background.

The one place I had seen "z-index," this code was included:

-ms-interpolation-mode: bicubic;

so I tried adding it to both sections of the CSS, and also added position:relative;

to the main theme CSS portion (was I supposed to do that?).

None of these had the desired effect.

ChancyRat · April 14, 2014

Rather than start a new thread, I'll try staying with this one because the current questions somehow integrate here.

1. How do I find the code to the gallery style I choose, so I can have a background image on any style? Allen, you gave me the code for the Smugmug gallery style. If I wanted to use another style? Case in point: http://www.joinrats.com/Sitemap/. The background color for the header sticks if I change to a different gallery style but the bottom section (thumbs, main image) looses its background color..

2. Why would http://www.joinrats.com/Sitemap/ loose the background image on IE8, when all my other pages I customize to add a background image, work reasonably well? At a minimum I do see the background image even if the size is wrong; I've been testing on IE for each page I customize. This one =

??

3. Segue to odd IE8 behavior, why is IE8 adding "#!/" to the end of every URL? E.g.:
http://www.joinrats.com/Sitemap#!/
The behavior is the same for any gallery.

ChancyRat · April 15, 2014

ChancyRat wrote: »

Rather than start a new thread, I'll try staying with this one because the current questions somehow integrate here.

1. How do I find the code to the gallery style I choose, so I can have a background image on any style? Allen, you gave me the code for the Smugmug gallery style. If I wanted to use another style? Case in point: http://www.joinrats.com/Sitemap/. The background color for the header sticks if I change to a different gallery style but the bottom section (thumbs, main image) looses its background color..

2. Why would http://www.joinrats.com/Sitemap/ loose the background image on IE8, when all my other pages I customize to add a background image, work reasonably well? At a minimum I do see the background image even if the size is wrong; I've been testing on IE for each page I customize. This one = ??

3. Segue to odd IE8 behavior, why is IE8 adding "#!/" to the end of every URL? E.g.:
http://www.joinrats.com/Sitemap#!/
The behavior is the same for any gallery.

Now I'm really confused because today I checked the page and the background image is not showing at all in Firefox.
Yesterday I must have viewed the page 100 times. http://www.joinrats.com/Sitemap/
How could it work yesterday and not today, when I didn't do anything between those times. :cry

ADDING: And when I go into customize mode, the image appears.

ADDING: And it shows in Chrome.

EDIT UPDATE: And now it's showing in Firefox. I had refreshed the page a couple of times... went away doing something else, came back and - it was back.

css for header section on one page only?

Comments