How to make BOLD and LARGER title on photo album?

mindstorm · 2016-07-01 12:58:57

I understand how to tie the caption and/or title to the photo album display. How can I make that text larger and bolder, so that it shows up more clearly? Right now, it is barely noticeable on a large display.

I guess that means, I would like the size/style to vary on display size too then, since it should probably not be large and bold on a phone screen...?

I am guessing this would be some custom CSS code. Not being a web developer, I would appreciate the magic soup to insert, if that is the case.

rod barbee · 2016-07-01 13:27:19

Try a forum search. I'm pretty sure it's been covered
This may help too:
http://ttg-tips-and-tricks.barbeephoto. … ight-site/

http://ttg-tips-and-tricks.barbeephoto. … selectors/

Matthew · 2016-07-01 14:38:08

mindstorm wrote:

I guess that means, I would like the size/style to vary on display size too then, since it should probably not be large and bold on a phone screen...?

Then you'll want to use media queries to set rules for different display sizes. For example:

@media screen and (min-width: 1025px) {
	body {
		font-size: 1.25rem;
	}
}

Would increase the font-size by 25% on any screen larger than an iPad.

gwlco · 2016-07-02 00:51:12

Mathew, where exactly do you place this? what template? what module?

rod barbee · 2016-07-02 01:01:08

that goes into your custom css
http://ttg-tips-and-tricks.barbeephoto. … backlight/

mindstorm · 2016-07-05 04:46:56

I have made some custom CSS that has ruined the site, but not yet accomplished what I want... (I have undone that, and trying fresh now)

I created a file "msp-custom.css" and uploaded it to my site under "backlight->custom->css" right next to your two other css sample.

I am trying to make the title under "large image display" much larger and more bold. As is now, nobody even notices there is a tiny title down there on my large monitor. So I tried the following:

@media screen and (min-width: 1025px) {
    /* For devices larger than iPad: */
	pswp.body {
		font-size: 32px;
	}
}

nada. No effect. When I tried it in the inspector, I got what I wanted. My problem now is interpreting those myriad of variables to control the proper one in the CSS (at least I think that is the problem...).

An example link -- http://www.mindstormphoto.com/galleries … id=1&pid=1

Last edited by mindstorm (2016-07-05 04:50:40)

rod barbee · 2016-07-05 05:20:36

If you're just after the caption under the large Photoswipe images, then you need a different selector. Try this

.pswp__caption__center {
	   font-size: 1.2em;
}

You can use the same selector to center the text or add other styles, as outlined at the bottom of this post:
http://ttg-tips-and-tricks.barbeephoto. … ight-site/

mindstorm · 2016-07-05 05:52:57

hmmm tried that, but with no change? Here is an example of how it still looks after the following code:

@media screen and (min-width: 1025px) {
    /* For devices larger than iPad: */
	.pswp__caption__center {
	   font-size: 1.5em;
	   text-align: center;
	}
}

http://www.mindstormphoto.com/galleries … id=1&pid=4

Caption is still left-aligned and normal size...?

rod barbee · 2016-07-05 06:14:32

this is the css that page is receiving:

/*.breadcrumbs a:first-child {	*/
/*	display: none;				*/
/*}								*/

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
/*	ul.breadcrumbs {			*/
/*		display: none;			*/
/*	}							*/

@media screen and (min-width: 1025px) {
    /* For devices larger than iPad: */
	pswp.body {
		font-size: 32px;
	}
}

which won't affect the Photoswipe caption

double check the page template and make sure it's getting the correct css file

mindstorm · 2016-07-05 07:20:30

rod barbee wrote:

double check the page template and make sure it's getting the correct css file

Oops. That was a prior version. Looks like my last ftp failed and I didn't see it. Works now -- thanks!

But... How do you see what is coming from my css? I look at the inspector, and I don't see anything obvious there?

rod barbee · 2016-07-05 08:44:30

But... How do you see what is coming from my css? I look at the inspector, and I don't see anything obvious there?

I just look at the page source code and click on the URL that refers to your custom css

mindstorm · 2016-07-05 08:51:37

rod barbee wrote:

But... How do you see what is coming from my css? I look at the inspector, and I don't see anything obvious there?
I just look at the page source code and click on the URL that refers to your custom css

OK. Some poking around, and I see a "style editor" tab that tells me what my CSS was. Thx for pointing that out!

Please consider this subject resolved.

rod barbee · 2016-07-05 09:01:11

Yes, in the inspector you can also look at all style sheets being used.

Community @ The Turning Gate

#1 2016-07-01 12:58:57

How to make BOLD and LARGER title on photo album?

#2 2016-07-01 13:27:19

Re: How to make BOLD and LARGER title on photo album?

#3 2016-07-01 14:38:08

Re: How to make BOLD and LARGER title on photo album?

#4 2016-07-02 00:51:12

Re: How to make BOLD and LARGER title on photo album?

#5 2016-07-02 01:01:08

Re: How to make BOLD and LARGER title on photo album?

#6 2016-07-05 04:46:56

Re: How to make BOLD and LARGER title on photo album?

#7 2016-07-05 05:20:36

Re: How to make BOLD and LARGER title on photo album?

#8 2016-07-05 05:52:57

Re: How to make BOLD and LARGER title on photo album?

#9 2016-07-05 06:14:32

Re: How to make BOLD and LARGER title on photo album?

#10 2016-07-05 07:20:30

Re: How to make BOLD and LARGER title on photo album?

#11 2016-07-05 08:44:30

Re: How to make BOLD and LARGER title on photo album?

#12 2016-07-05 08:51:37

Re: How to make BOLD and LARGER title on photo album?

#13 2016-07-05 09:01:11

Re: How to make BOLD and LARGER title on photo album?

Board footer