separator color

ericspicts · August 27, 2013

I know that this is an ignorant question, so I apologize from the onset. I am trying to change my separator line color. In the separator > options it says that the color is set by my theme, and it gives me the option of "default, muted or accent". Nothing I do seems to change the default color in a manner that changes the default color for my separator line.

Under theme > active theme > basic I change the primary color but that doesn't seem to change the separator color

under theme > active theme> background, I try changing the variius colors under that menu and that doesn;t seem to do anything to the separator color either.

I can change the accent color for the theme and then select accent color for the color of the separator line, and that works, but I don;t want my separator line to be the accent color, I want it to be the text color so that it matches the color of my menu.

I have tried deleting the design object and then re -adding this buit that doesn't work.

And yes, I am doing this at the "entire site" level.

Thanks

- Eric

DanCarl97 · August 28, 2013

I've just had the same problem. The 'default' colour which is supposedly set by theme.... Well, it just doesn't work.

Allen · August 28, 2013

Put this in the CSS. To change the color of hr line use background and not color.
Set the line color to default.

.sm-page-widget-separator {background: red;}

ericspicts · August 28, 2013

Allen wrote: »

Put this in the CSS. To change the color of hr line use background and not color.
Set the line color to default.

.sm-page-widget-separator {background: red;}

Thanks. So this indeed gives me a line where I want it and I can alter the color, but then I guess I need additional css code to change the width and length, and I don't get the functionality of pinning in order to get the entire header bucket to stay at the top of the screen as I scroll.

Am I missing something in terms of what I have to change withing the theme color or some other setting in order to adjust the separator line color without using css code -- the way I imagine smugmug intended? I'm not against using css, its just that with the above method, I need to know even more css code to get the line to behave the way I want.

- Eric

Smug Eric · August 28, 2013

If you select the wrench icon for the separator in the customize menu you can specify a width and height, it's also where you can set the color to use one of your themes colors.

leftquark · August 28, 2013

ericspicts wrote: »

Thanks. So this indeed gives me a line where I want it and I can alter the color, but then I guess I need additional css code to change the width and length, and I don't get the functionality of pinning in order to get the entire header bucket to stay at the top of the screen as I scroll.

Am I missing something in terms of what I have to change withing the theme color or some other setting in order to adjust the separator line color without using css code -- the way I imagine smugmug intended? I'm not against using css, its just that with the above method, I need to know even more css code to get the line to behave the way I want.

- Eric

I turned off my separator and used the code found on this thread:
http://www.dgrin.com/showthread.php?t=237930

/* Add a line underneath each link in the menu (nav) bar */
.sm-page-widget-nav-toplink, .sm-page-widget-nav-toplink:last-child {
  border-bottom: 1px solid #595959 !important;
  padding: 7px 0px 7px 0px !important;
  width: 90%;
  margin-bottom: 0px !important;
}

ericspicts · August 28, 2013

Smug Eric wrote: »

If you select the wrench icon for the separator in the customize menu you can specify a width and height, it's also where you can set the color to use one of your themes colors.

Right, that's where I started, but nothing I did allowed me to change the color -- the choices are default, muted or accent. I can get ti to display the accent color, but with the default color it appears as a very dark grey -- perhaps even black - not perceptibly different from my background color so it is not really functioning as a separator. I can;t seem to make any changes in the theme colors that change this (see my first post). So with the smug mug tools I am able to change size and pinning, but not able to change the color. I figure I am doing something wring, but can;t figure it out.

With css code provided above, I can change the color, but not the other options.

Allen · August 29, 2013

ericspicts wrote: »

...
With css code provided above, I can change the color, but not the other options.

What other options? They should all be able to change in the CSS.

ericspicts · August 29, 2013

ericspicts wrote: »

Right, that's where I started, but nothing I did allowed me to change the color -- the choices are default, muted or accent. I can get ti to display the accent color, but with the default color it appears as a very dark grey -- perhaps even black - not perceptibly different from my background color so it is not really functioning as a separator. I can;t seem to make any changes in the theme colors that change this (see my first post). So with the smug mug tools I am able to change size and pinning, but not able to change the color. I figure I am doing something wring, but can;t figure it out.

With css code provided above, I can change the color, but not the other options.

Using the wrench tool provided by smugmug, I have been able to change the size of the separator line and have been able to pin the navbar. I have even been able to change the color to the accent color, but I have not been bale to change it to the text color which is what I want. I don't understand what the default separator color is or what value of the theme it gets the default color from because all I can get is a black separator no matter how I seem t change the various colors that I can select in the theme using edit > theme > background.

If I have to get there using css, the code that was suggested:

.sm-page-widget-separator {background: red;}

works fine to change the color, but could someone tell me what css code I need to change thickness and width as well as to get this element to pin?

Thanks for everyone's help.

- Eric

leftquark · August 29, 2013

You seem to have missed my comment which fixes your issues:

I turned off my separator and used the code found on this thread:
http://www.dgrin.com/showthread.php?t=237930

/* Add a line underneath each link in the menu (nav) bar */
.sm-page-widget-nav-toplink, .sm-page-widget-nav-toplink:last-child {
  border-bottom: 1px solid #595959 !important;
  padding: 7px 0px 7px 0px !important;
  width: 90%;
  margin-bottom: 0px !important;
}

ericspicts · August 29, 2013

leftquark wrote: »
You seem to have missed my comment which fixes your issues:

I turned off my separator and used the code found on this thread:
http://www.dgrin.com/showthread.php?t=237930
/* Add a line underneath each link in the menu (nav) bar */
.sm-page-widget-nav-toplink, .sm-page-widget-nav-toplink:last-child {
  border-bottom: 1px solid #595959 !important;
  padding: 7px 0px 7px 0px !important;
  width: 90%;
  margin-bottom: 0px !important;
}

Thanks. I appreciate your willingness to help. The code above causes the menu items to stack vertically with a white line under each one -- taking up a lot of vertical space in the header. Is this due to something I have set in my margins or is that the way you are intending the css code?

I was trying to just get a single line all the way across -- like what I have in my legacy site at ericspicts.com

Again I am sorry for taking up everyone's time on an issue that I suspect is just due to my failure to understand how smugmug intends for me to make the color switch using their provided tools without css.

- Eric

leftquark · August 30, 2013

ericspicts wrote: »

Thanks. I appreciate your willingness to help. The code above causes the menu items to stack vertically with a white line under each one -- taking up a lot of vertical space in the header. Is this due to something I have set in my margins or is that the way you are intending the css code?

I was trying to just get a single line all the way across -- like what I have in my legacy site at ericspicts.com

Again I am sorry for taking up everyone's time on an issue that I suspect is just due to my failure to understand how smugmug intends for me to make the color switch using their provided tools without css.

- Eric

I realize that most of this should be part of the "customizer" -- SmugMug billed this as NOT NEEDING CODE .. yet here we are needing a lot of code. With that said, most people on here will give you helpful hints and usually go the extra mile ... sometimes you'll need to take a look at the code and do a couple quick searches on the web to get things exactly how you want. For example, my code above is what I used to change the menu and do what you want but it needs to be modified for your use. For example, it says 'border-bottom: 1px solid ...' Obviously you don't want a border ... in fact you don't want a border at all (so you might do something like "border: 0px" instead).

To get the color to change on hover you'll need to do code that looks like this:

.sm-page-widget-nav-toplink a:hover {
   background-color: orange !important;
}

You can look up the code for the orange you want and replace it where it says "orange". Do a quick search on "HTML Color Picker".

The above code says: for the menu ... which is called "sm-page-widget-nav-toplink", set the link hover attributes as follows: background color is orange. !important tells the code to overwrite whatever smugmug had set the background color to.

It sounds like you placed your menu as a "Vertical" menu? In your menu block there's an option for how to display it. You want yours to be "horizontal". Make sure you gave it enough width.

Also, in my code I set the top and bottom padding to 7px and the left/right padding to 0px. You'll prob. want to flip it so it's "0px 7px 0px 7px " ... or whatever amount of spacing you want between each menu item. Also, you prob. want to get rid of the width: 90%.

dallasw · August 30, 2013

ericspicts wrote: »

.sm-page-widget-separator {background: red;}

works fine to change the color, but could someone tell me what css code I need to change thickness and width as well as to get this element to pin?

To get the separator to be pinned with the rest of the header, it needs to be in the header section. This can be done by going into the customizer and clicking the move icon for the separator content block. Drag the content block up slightly until the content block in the header fades out. Drop the separator there and it will be pinned with the rest of the header.

ericspicts · August 30, 2013

dallasw wrote: »

To get the separator to be pinned with the rest of the header, it needs to be in the header section. This can be done by going into the customizer and clicking the move icon for the separator content block. Drag the content block up slightly until the content block in the header fades out. Drop the separator there and it will be pinned with the rest of the header.

ok thanks. got that issue with respect to pinning solved. Now I think the final issue is that (with the above css code) while I can use the customizer and affect the width of the line, it won't let me change the length. It goes all the way across despite what settings I have for the container margins or the width of the line in the customizer.

Again, I know you don;t intend to make this so difficult to set, there must be something fundamental that I have done in correctly.

dallasw · August 30, 2013

ericspicts wrote: »

Now I think the final issue is that (with the above css code) while I can use the customizer and affect the width of the line, it won't let me change the length.

It looks like the CSS code needs a slight tweak. Try changing your CSS to this:

.sm-user-ui .sm-page-widget-separator hr {
    background-color: red;
}

einat · August 30, 2013

ericspicts wrote: »

... and affect the width of the line, it won't let me change the length.

To change the length you can set larger values for left\right margins of the separator.

ericspicts · August 30, 2013

dallasw wrote: »
It looks like the CSS code needs a slight tweak. Try changing your CSS to this:
.sm-user-ui .sm-page-widget-separator hr {
    background-color: red;
}

THANKS -- this did the trick

separator color

Comments