Changing the Title on a Slideshow

FiestaRed

Is it possible to change the font size of a Slideshow Title and make it bold? When I say font size, not just the S/M/L options that are available.

Hikin' Mike

There is no title on my slideshow. If you're talking about the lightbox, add this to your theme's CSS:

.sm-user-ui .sm-lightbox-title {
    color: #f00;
    font-size: 35px;
    font-weight: 900;
    }   

If that isn't what you're talking about, please post your site/page.

FiestaRed

Thanks for the help Mike but the title I would like to change and make bold is on my Slideshow and I can't see anywhere apart from the choice of S/M/L text sizes.

Because I'm new to DGRIN I can't post a link to my site. I've also been trying to add a screenshot to show the Title I mean but for reason I can't do that either.

denisegoldberg

(deleted)

denisegoldberg

This works for me when accessing your homepage using Firefox Web Developer (assuming that the site referenced in your profile is the site you are asking about):
.sm-page-widget .sm-page-widget-header > h3 { font-size: 20px; font-weight: bold ; }

Place it in a CSS content block on your homepage (assuming that it is the homepage slideshow you are asking about), changing the font characteristics as desired.

If you need to add a site link in the time before you can post them, include the link in your post as text, without the http:// and potentially replacing . with a word, for example www dot dgrin dot com.

FiestaRed

BRILLIANT! Thanks Denise, you're a star. I'm still using IE11 but it works on that too.

denisegoldberg

@FiestaRed said:
BRILLIANT! Thanks Denise, you're a star. I'm still using IE11 but it works on that too.

I'm glad it worked for you.

The only reason I mentioned Firefox was to let you know what tool I used to determine the css classes.

FiestaRed

The site I'm trying to build is mikeswainwildlifedotcodotuk As I get braver, the next thing I'd like to have a go at is changing the font colour for the title and then, eventually make the font in the menu up above the title bolder.

Thanks again for all the help.

denisegoldberg

@FiestaRed said:
...the next thing I'd like to have a go at is changing the font colour for the title and then, eventually make the font in the menu up above the title bolder.

To change the font color, add the "color" property to the CSS above. For example:
.sm-page-widget .sm-page-widget-header > h3 { font-size: 20px; font-weight: bold ; color: #699864; }
If you haven't used hex color codes before, there are many color charts available. The one I usually use is at http://www.december.com/html/spec/color.html.

This CSS will change the weight of font for your menu entries to bold:
.sm-page-widget-nav-toplink { font-weight: bold; }
Place this CSS to change the menu entries either in your theme or in a CSS block on entire site.

FiestaRed

Thanks again for all your help Denise, it is really appreciated.

Is there anywhere on Smugmug or the net that I can learn about CSS and the codes or is that a whole different World? I do feel a bit guilty keep asking on here for changes and I would like to try for myself. I tried changing the colour of the fonts in the menu bar with the same code you supplied for the Title but that didn't work, I'd also like to add separators between the menu heading if I could.

denisegoldberg

You can add separators between the menu items by editing the menu while on entire site and selecting separators.

The CSS entries are specific to the element you want to change - the name of the menu items and the name of the title are different. But - to change the color of the menu items you should use the menu content element box first. If you want to use a color other than the ones you set up in your theme, then you will need to use CSS.

I'm not sure why adding color to the CSS I provided above for the menu doesn't work. I tried it too, even adding the tag !important, still didn't change. Hopefully someone with better CSS skills will jump in with an answer.

As far as learning goes, I learned by looking at CSS other people supplied and by referencing sites like http://www.w3schools.com/css/default.asp and https://www.w3.org/Style/CSS/Overview.en.html.

You can use tools built in to Chrome and Firefox to identify the elements on the page.
In the Firefox tools menu, follow the Web Developer link, https://developer.mozilla.org/en-US/docs/Tools
In Chrome, select More tools... Developer tools. Help is at https://developer.chrome.com/devtools

Don't hesitate to ask questions here. Be very specific about what you want to change. You can use the answers supplied as a stepping-stone to learning.

Hikin' Mike

I forgot I turned my title slideshows off.

This works:

.sm-user-ui .sm-page-widget-slideshow .sm-page-widget-header h1,
.sm-user-ui .sm-page-widget-slideshow .sm-page-widget-header h2 ,
.sm-user-ui .sm-page-widget-slideshow .sm-page-widget-header h3  {
    color: #f00;
    font-size: 50px;
    font-weight: bold;
    }

Hikin' Mike

@FiestaRed said:
The site I'm trying to build is mikeswainwildlifedotcodotuk As I get braver, the next thing I'd like to have a go at is changing the font colour for the title and then, eventually make the font in the menu up above the title bolder.

Thanks again for all the help.

I'm getting a 'Not Found' when I typed in your URL from your profile.

denisegoldberg

@Hikin' Mike said:

@FiestaRed said:
The site I'm trying to build is mikeswainwildlifedotcodotuk As I get braver, the next thing I'd like to have a go at is changing the font colour for the title and then, eventually make the font in the menu up above the title bolder.

Thanks again for all the help.

I'm getting a 'Not Found' when I typed in your URL from your profile.

Here's the working URL - http://www.mikeswainwildlife.co.uk/.

Hikin' Mike

@denisegoldberg said:
Here's the working URL - http://www.mikeswainwildlife.co.uk/.

Thanks. I didn't bother to add the 'www'.

FiestaRed

Denise, Mike, thanks for all your help. It is really appreciated.

Having come from using a Zenfolio website, I get the feeling that with Smugmug, people really do
like to help. I never felt the same way with Zenfolio.

AceCo55

@FiestaRed said:
Denise, Mike, thanks for all your help. It is really appreciated.

Having come from using a Zenfolio website, I get the feeling that with Smugmug, people really do
like to help. I never felt the same way with Zenfolio.

Believe me, Denise and Mike are Smugmug legends!!!!!!!!!!!
Super helpful / knowledgeable and they do an awesome amount helping people.
There are plenty of others who go out of there way to help - it is a very friendly forum.

To learn some stuff about css (and I don't know more than "copy-paste-substitute") maybe these might be a start:
http://www.w3schools.com/css/default.asp
http://www.tizag.com/cssT/

The css I have on my site has come almost entirely from Allen, Denise, Aaron (Leftquark) and Mike ... great people.
I just play around with it now - until I get stuck (which is whenever I want something new!)

You might want to check out Aaron's collections of "Customization How-to''s" here:
http://www.aaronmphotography.com/Customizations

Welcome to the forum

FiestaRed

Thanks for the links Ace, I'll have a read through them.