You are here: Forum Home / RapidWeaver User Forum / Stacks Chat / Thread
prettyPhoto - colored navigation text??
Is it possible to turn the navigation text in the bottom left corner of a prettyPhoto gallery red (as shown in the screenshot below, taken from Mauricio’s site)? Or, at minimum, can I use larger arrows?
Many thanks,
Dave
Image Attachments
Click thumbnail to see full-size image
Hi
It looks like the following css will change the text color - either use name or hex no
.pp_description {
color: red;
}
Hope this helps
In Firefox, the !important declaration needs to be used so I’d suggest:
.pp_description{
color:red!important;
}
Brian
Come on over to my Stacks Store, El Stacko.... or else!
Get some of the coolest, most eye-catching stacks available.
Add the “wow-factor” your site deserves!
BannerZest implementation tutorials! > > > Click me! Click me!
Thanks so much guys! That worked.
If I want to add it to the styles.css…and add bold and a different font size - does the screenshot below look correct? (I assume the !important goes last)
All the best,
Dave
Image Attachments
Click thumbnail to see full-size image
Based on what I’m seeing, only the color needs the !important…. so:
.pp_description{
color:red!important;
font-weight:bold;
font-size:1.2em;
}
Brian
Come on over to my Stacks Store, El Stacko.... or else!
Get some of the coolest, most eye-catching stacks available.
Add the “wow-factor” your site deserves!
BannerZest implementation tutorials! > > > Click me! Click me!
Awesome, thanks again Brian. But, now I have a few more questions…
1) How do you know that only the color needs the declaration?
2) If the size (or weight) needs a declaration, do I just add it to each line?
3) Is there a reason not to add it to the styles.css file? I’m already at 30 stylesheets for this site, and don’t want to add any more.
All the best,
Dave
Answers to life’s most vexing questions:
1) I used Firefox’s developer’s tools to try the CSS and it didn’t work until I added !important
2) You add it to whichever line(s) need it. In this case, only the color needed it.
3) If you add the code to the styles.css sheet, you need to put !important on all three lines because when a page loads in a browser, the styles.css is loaded first and the stack-specific code will be added later and overwrite the styles.css unless the !important is present.
Thus sayeth El Presidente,
Brian
Come on over to my Stacks Store, El Stacko.... or else!
Get some of the coolest, most eye-catching stacks available.
Add the “wow-factor” your site deserves!
BannerZest implementation tutorials! > > > Click me! Click me!
Hi Brian
Could it be theme dependent the requirement of the important command?
I tested with the Alpha Theme and the red displayed without the command in firefox on my desktop.
Hi Brian
Could it be theme dependent the requirement of the important command?
I tested with the Alpha Theme and the red displayed without the command in firefox on my desktop.
I didn’t see this thread until this morning…
I agree, it’s a combination of all of the above. In my experience, it is theme-dependent and it also depends on the order in which the stylesheets are loaded…
Cheers,
Mauricio
Hi Brian
Could it be theme dependent the requirement of the important command?
I tested with the Alpha Theme and the red displayed without the command in firefox on my desktop.
I know that from my testing in Firefox (the PC version), it required the !important tag. I was actually viewing it on RWEXTRAS’ own site
Brian
Come on over to my Stacks Store, El Stacko.... or else!
Get some of the coolest, most eye-catching stacks available.
Add the “wow-factor” your site deserves!
BannerZest implementation tutorials! > > > Click me! Click me!
All I know is that it works - the QT videos look fantastic in prettyPhoto and my client is very happy with the results. Many thanks to shirleywhirly, Brian and Mauricio!
Cheers,
Dave