Custom CSS

jjesp

Hi.

I am new to SmugMug, so sorry if it is a stupid question. I have tried to add some custom CSS on my site theme. But somehow the CSS changes are overwritten by the theme default. When I load my page, the CSS changes appears for a little second in the browser, and then the layout changes back to the state where it was before I added the CSS code.

What am I doing wrong?

Jan Jespersen Photography

mrneutron

Hi Jan,

If you're trying to use any scripting, that's not allowed. You can write to the help desk and we can take a look.
Please include the code you're using and make sure to write in using the email address we have on file. Then we can find your site and verify you are the site owner.

jjesp

mrneutron wrote: »

Hi Jan,

If you're trying to use any scripting, that's not allowed. You can write to the help desk and we can take a look.
Please include the code you're using and make sure to write in using the email address we have on file. Then we can find your site and verify you are the site owner.

Thank you, I will do so.
/Jan

jjesp

mrneutron wrote: »

Hi Jan,

If you're trying to use any scripting, that's not allowed. You can write to the help desk and we can take a look.
Please include the code you're using and make sure to write in using the email address we have on file. Then we can find your site and verify you are the site owner.

I now found a problem with the scripting. I changed it, and now it is working, thank you!

Maybe you can tell me how to change my title in the header? If I wan't to put a border around the title, but not the complete header, can this be done? I mean something simple like

.sm-title{border: solid;}

I haven't figured out how to find the names/id's on all the ".sm-" content blocks. Is there a good documentation I could read online?

Allen

jjesp wrote: »

Hi.

I am new to SmugMug, so sorry if it is a stupid question. I have tried to add some custom CSS on my site theme. But somehow the CSS changes are overwritten by the theme default. When I load my page, the CSS changes appears for a little second in the browser, and then the layout changes back to the state where it was before I added the CSS code.

What am I doing wrong?

Jan Jespersen Photography

I would paste the CSS here then we can see if we can help getting it to work. I basically don't
understand this as I would think your personal CSS should load after the theme. But in some cases
an !important is needed to override the theme CSS.
i.e. color: red !important;

jjesp

Allen wrote: »

I would paste the CSS here then we can see if we can help getting it to work. I basically don't
understand this as I would think your personal CSS should load after the theme. But in some cases
an !important is needed to override the theme CSS.
i.e. color: red !important;

Thank you. I tried with something simple like

.sm-page-title {
  border-style: solid;
  border-width: 5px;
  border-color: red !important;
}

but I guess the problem is the name .sm-page-title ?

Allen

jjesp wrote: »

Thank you. I tried with something simple like

.sm-page-title {
  border-style: solid;
  border-width: 5px;
  border-color: red !important;
}

but I guess the problem is the name .sm-page-title ?

What page and what on that page?
Top of all pages?
Try this.

.sm-page-widget-logo-text-container h1 {
border-style: solid;
border-width: 5px;
border-color: red !important;
padding: 0 5px; /* adds space inside R & L */
}

BTW, those can be written like this. http://www.w3schools.com/css/css_border.asp

.sm-page-widget-logo-text-container h1 {
border: 5px solid red;
padding: 0 5px; /* adds space inside R & L */
}

jjesp

Allen wrote: »

What page and what on that page?
Top of all pages?
Try this.

.sm-page-widget-logo-text-container h1 {
border-style: solid;
border-width: 5px;
border-color: red !important;
padding: 0 5px; /* adds space inside R & L */
}

BTW, those can be written like this. http://www.w3schools.com/css/css_border.asp

.sm-page-widget-logo-text-container h1 {
border: 5px solid red;
padding: 0 5px; /* adds space inside R & L */
}

Brilliant, it does the trick! I know some basic css. But how did you find out that it should be .sm-page-widget-logo-text-container h1 ? Using the developer tools in your browser? Or is there a sm developer reference guide somewhere?

jjesp

jjesp wrote: »

Brilliant, it does the trick! I know some basic css. But how did you find out that it should be .sm-page-widget-logo-text-container h1 ? Using the developer tools in your browser? Or is there a sm developer reference guide somewhere?

Ok, I tried the Firefox inspector and searched for H1. And i found the .sm-page-widget-logo-text-container. I begin to see how this works. I have to dig into it a little more myself I guess Thank you for the help Allen!

Allen

I used the Firefox inspect element by right clicking the element on the page. Found out the text container goes page
wide but found the text (h1) was what I wanted.

I use the Web Developer "edit CSS" to play with the CSS in real time.