How to customize media buttons & put grey lines in banner page

The styling is found in the theme’s style.css file around line 134 and looks like this:

#st-banner0-wrapper {
	max-height: 590px;
	position: relative;
	border-top: 1px solid #525458;
	z-index: 1;
}

However, in the theme options on the Colour Tab, there is a colour setting for this line labeled as “Banner Top Line” which is the one you want. This is when you publish an image or something to the Showcase Front Page widget position.

So do you mean that upon applying this, then the border will be visible across all pages?

How about modifying the buttons to appear at the top of my site?

Sorry about the button one (I’m assuming you are referring to the social icons)…forgot to reply. The social buttons are images, so you will need to recreate them. However, here is something you should know is that right now I am redesigning the Celestial theme from the ground up and these items will be addressed such as being able to change the social icons which will no longer be images, but fonts instead (much easier to customize).

btw what shall I change to show the bottom line appear on all banner pages?

This is where you will be changing the background color setting of the banner with the Banner Background setting on the Colours tab, then on the Header tab in the custom options, adjust the padding to adjust how much background you want to show. When you adjust it, you can change the top, right, bottom, and left padding. By default, it’s set to:

7px 0px

This means 7px on the top and bottom and 0px for the left and right sides. You can adjust the padding in long hand which means the same:

7px 0px 7px 0px

So if you just wanted a thin line at the top which will show the background colour as a thin line, you can do it like this:

1px 0px 0px 0px

I can’t find the color for the line below the picture of the header.

Where it is located?

I can only see two option for the color for the header.

Header and Submenu Background
Header Top Line

There is no Header Bottom Line?

On the Colours tab of the theme options, the 6th and 7th option from the top “Banner Background” and “Banner Top Line” is what you are looking for. Then for managing padding (the space around the image banner), this setting is on the Header Image tab of the theme options.

Can you check my website?
The banner in my home page has a grey line below the picture. But that is not my Banner Background color.

How do I get that grey bottom color?

It seems it is not in the color options.

I already change the color background of the homepage to Blue but the grey line below still exist.

Looks like I need to make some adjustments to the theme on the next update. But the bottom grey line is not in the colour options. It’s located in the theme’s style.css around line 130 and looks like this:

#st-header-image {
	position: relative;
	border-bottom: 5px solid #bcc0c3;
}

The line above the image that is just below the social networking bar also seems to need adjustments. The styling for this in the theme options doesn’t appear to be cooperating. The styling for this is also in the style.css around line 134 and looks like this:

#st-banner0-wrapper {
	max-height: 590px;
	position: relative;
	border-top: 1px solid #525458;
	z-index: 1;
}

If you start to make changes to the theme files, I recommend using a child theme for this…which I have available.

I made notes to make some updates to the theme so this is easier to manage for the user….which I will start on this tomorrow and get it uploaded.

Actually I don’t like to start all over again. I will just change the color blue to the grey line instead. Do you have the exact code for the grey line?

Also, can I ask where can I change the media buttons images? Can you give me the exact location for those images?

The grey line is the code I posted above where is shows the css as:

#st-header-image {
	position: relative;
	border-bottom: 5px solid #bcc0c3;
}

Just change the #bcc0c3 to a colour you want.

As for the social icons, this is found in the theme’s image folder with a file called: sprite-social.png

Ok thanks