Several CSS Questions

Also, I might be interested in the option to remove the caption section from the homepage slider completely. Is that possible?

Hi there! Can you share a link to a site where you’re currently using Pictorico so I can take a look and work through some of these questions? ??

As it says in my original message, I’m not currently using Pictorico. If it is necessary to have Pictorico live to get support, I’ll do that. Please advise. ??

Also, thank you so much in advance for your help!

Sure! I’ve included what I can here using a test site, but some items may need to be checked out on a live site (when I can’t reproduce on this end in a test).

1. The blue line along the bottom on the buttons (on the search button, at least) is coming from a border-bottom assigned to the button. For the search button, for example, you could add this to get rid of the blue and make the hover color the same as your button color:

input.search-submit:hover {
	background: #CEA6DB;
	color: #fff;
	border-bottom: #CEA6DB;
}

2. I very slightly edited the CSS for the first two pieces you shared and they all appeared to start working correctly then. I used this on my test site (plus the rest of it you shared as-is):

.entry-content a {
	color: #7B5C88;
}

.entry-content a:hover, .entry-content a:active {
	color: #7B5C88;
}

3. When I add your CSS to my test site, I see the items disappear, but don’t see a blue box. May need to see it live on a site to be able to help here, since I can’t reproduce so far.

For the font changes, there is information on how to do that here: https://codex.www.ads-software.com/Playing_With_Fonts

Let me know how it goes!

1. The blue line along the bottom on the buttons (on the search button, at least) is coming from a border-bottom assigned to the button. For the search button, for example, you could add this to get rid of the blue and make the hover color the same as your button color:

This, unfortunately, did not work. Specifically, this is happening with the “Post Comment” button.

2. I very slightly edited the CSS for the first two pieces you shared and they all appeared to start working correctly then. I used this on my test site (plus the rest of it you shared as-is):

This worked perfectly!

3. When I add your CSS to my test site, I see the items disappear, but don’t see a blue box. May need to see it live on a site to be able to help here, since I can’t reproduce so far.

Please see this image for what I’m seeing.

For the font changes, there is information on how to do that here: https://codex.www.ads-software.com/Playing_With_Fonts

Unfortunately, I don’t know which fonts are associated with which sections, so I’m not sure how to rectify these issues myself. I’m not sure how to adjust the slider at all, actually.

1. Ah, which button makes a difference in how it’s targeted. For the post comment button, try this CSS:

#submit:hover {
	background: #CEA6DB;
	color: #fff;
	border-bottom: #CEA6DB;
}

2. Yay!

3. Oh, I see what you mean. Hmm. I’m still not able to get that to reproduce on my test site though, so I can’t tell where it’s coming from yet. Maybe once you go live you can let us know and we can take a look to help find it if it’s still happening.

For the fonts —

I see Open Sans Condensed and PT Serif being used on the theme. (If you right click & view source on the site, then search “font” you’ll see them there. Or there’s a Chrome extension called WhatFont that lets you point to a font on a website and it’ll tell you what it is.)

It sounds like you’re wanting to adjust specific areas in different ways, so those will be targeted separately.

For example, this CSS will change the font settings on the slider’s post title and excerpt:

.home .entry-title {
	font-family: verdana, sans-serif;
	font-size: 26px;
	font-weight: bold;
}

.home .entry-excerpt {
	font-family: verdana, sans-serif;
	font-size: 16px;
}

And to change the post title font/size on the posts on the front page grid, add this CSS:

.content-area .entry-title a {
	font-family: helvetica, sans-serif;
	font-size: 30px;
}

Or to target the post title on an individual post page, add this CSS:

.single-post .entry-title {
	font-family: Times, serif;
	font-size: 60px;
}

(Change the fonts & sizes to fit your needs.)

Those all worked fantastically! Thank you! My next set of questions, if you don’t mind…

1. How can I center the caption text on the slider image, and reduce the space in which that text appears? Also, how can I change the colour of the background of the slider caption?

2. How can I move the navigation so that it appears across the entire top of the screen (not divided into two)?

3. How can I have the slider rotate the posts automatically, on its own?

4. How can I change the color of the background of the arrows on the slider (currently black)? And then, how can I change the color of the arrows?

Thanks so much!

You’re welcome!

Please start a new thread for the next batch of questions so we can keep this one from getting too long and hard to follow.

https://www.ads-software.com/support/theme/pictorico#postform

You got it!