Background for title and Menu

TallPhotoGuy · July 2, 2016

How do I have the Title displayed with a solid color background that is only the width and height of the text. I have a picture background and the title and menu are hard to see, hence if in a colored block they will stand out

Hikin' Mike · July 2, 2016

You can try this. This will add a dark (80% black) under your titles. You can change the opacity ('0.8') i.e '1' is solid and '0.1' is almost transparent.

/**
* Adds a Background Color Under Titles
************************************************/
.sm-user-ui .sm-page-title {
    background: rgba( 0, 0, 0, 0.8 );
    }

TallPhotoGuy · July 6, 2016

Hikin' Mike wrote: »
You can try this. This will add a dark (80% black) under your titles. You can change the opacity ('0.8') i.e '1' is solid and '0.1' is almost transparent.
/**
* Adds a Background Color Under Titles
************************************************/
.sm-user-ui .sm-page-title {
    background: rgba( 0, 0, 0, 0.8 );
    }

Mike

Thanks. How can I make the width to be just the width of the title text and not the full screen. Also if the title is wider than the full screen is there a way to auto use a smaller font so the title is alwayes 1 line.

https://hewitt.smugmug.com/Tinsley

Hikin' Mike · July 6, 2016

I haven't been able to do that. If this is just on that page, you can add a HTML/CSS block instead of a Title block. Then add this to your HTML:

[html]
<div class="background-text">
<h1><span>Text Here</span></h1>
</div>
[/html]

Then add this in the CSS section:

.background-text {
    text-align: center;
    }
.background-text span {
    background: rgba( 0, 0, 0, 0.2 );
    }

SteveTheOldMan · July 6, 2016

I've been wanting to do something similar (in fact, that's why I'm here!) So...the stupid question of the night: WHERE do you add HTML/CSS? Is there a manual/pdf that references this stuff? Thanks!!

Lille Ulven · July 7, 2016

@SteveTheOldMan: you open your website in a browser and go to the gallery / folder where you want to add html/css to (don't forget to login

). Then you click on "Customize" - "Customize Content and Design" and on the right side you find a new menu with a dark grey background. Select for which area your new content block is valid first. Then from the tab "Content" you choose "Add Content Blocks" - "HTML & CSS" and choose if you want a CSS block only or a CSS & HTML block, click on your selection and drag (while holding the mouse button down) it to where you want it to be displayed on your website.
Also explained here: What are content blocks and how are they used

Lille Ulven

TallPhotoGuy · July 19, 2016

Hikin' Mike wrote: »
You can try this. This will add a dark (80% black) under your titles. You can change the opacity ('0.8') i.e '1' is solid and '0.1' is almost transparent.
/**
* Adds a Background Color Under Titles
************************************************/
.sm-user-ui .sm-page-title {
    background: rgba( 0, 0, 0, 0.8 );
    }

And what is the code for a menu

Hikin' Mike · July 19, 2016

TallPhotoGuy wrote: »

And what is the code for a menu

Add this in bold:

.sm-user-ui .sm-page-title,
[B].sm-page-widget-15306868 .sm-page-widget-content[/B] {
    background: rgba( 0, 0, 0, 0.8 );
    }

TallPhotoGuy · July 20, 2016

Hikin' Mike wrote: »
I haven't been able to do that. If this is just on that page, you can add a HTML/CSS block instead of a Title block. Then add this to your HTML:

[html]
<div class="background-text">
<h1><span>Text Here</span></h1>
</div>
[/html]

Then add this in the CSS section:
.background-text {
    text-align: center;
    }
.background-text span {
    background: rgba( 0, 0, 0, 0.2 );
    }

I have also used a Text Block and hyperlink the text to where I want to go

TallPhotoGuy · July 20, 2016

TallPhotoGuy wrote: »

I have also used a Text Block and hyperlink the text to where I want to go

But was unable to add the background. I did it mainly to customize a menu all on one line

Hikin' Mike · July 20, 2016

TallPhotoGuy wrote: »

I have also used a Text Block and hyperlink the text to where I want to go, but was unable to add the background. I did it mainly to customize a menu all on one line

Don't use a Text Block, use the HTML/CSS block. The code I posted worked on my testing page.

TallPhotoGuy · July 21, 2016

Hikin' Mike wrote: »

Don't use a Text Block, use the HTML/CSS block. The code I posted worked on my testing page.

Thanks. I did the Title and menu and changed the margin so they would look as one, At

https://hewitt.smugmug.com/Tinsley

There is black space above Tinsley, how do I get the same black space below Menu

Other comments welcome

Hikin' Mike · July 21, 2016

I would first remove the 'margin-top: -12px' from your navigation and add this:

.sm-user-ui .sm-page-widget-15174688 .sm-page-widget-content,
.sm-user-ui .sm-page-widget-15306868 .sm-page-widget-content {
    margin: 0;
    }

.sm-page-widget-15306868 .sm-page-widget-content {
    padding-bottom: 12px;
    }

TallPhotoGuy · July 21, 2016

Hikin' Mike wrote: »

I would first remove the 'margin-top: -12px' from your navigation and add this:

.sm-user-ui .sm-page-widget-15174688 .sm-page-widget-content,
.sm-user-ui .sm-page-widget-15306868 .sm-page-widget-content {
    margin: 0;
    }

.sm-page-widget-15306868 .sm-page-widget-content {
    padding-bottom: 12px;
    }

Thanks, that works. Appreciate the help

Background for title and Menu

Comments