Website logo and site title background on Snaps.

lynseyannphotography · Member · Jun 22, 2016 at 3:04 pm
Copy link

Add topic to favorites
Hi,

I’m looking for help with adding my company logo to my website so it looks correct.

Im currently using the snaps theme.

1/ I’m looking for a away to change the site title background from the dark grey to a light cream colour (the same as the background colour to the Home page text). This is to enable the black text on my logo to be seen.

2/ Im looking to add my logo which incorporates my company name and then just below my company logo, I’m looking to insert the tagline ‘Documentary Wedding Photographer’ in black text also.

Your help with this matter would be much appreciated and thanks in advance.

Lynsey-Ann

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jun 22, 2016 at 8:07 pm
Copy link
Hi Lynsey-Ann, for #1, this mimics the slightly transparent background of the content area. To adjust the transparency/opacity, adjust the 0.95 value. The closer to 1, the more opaque, the closer to 0, the more transparent.
```
#masthead {
    background-color: rgba(255, 255, 255, 0.95);
}
```
You will probably want to change the color of the tagline/site description since it becomes basically invisible with the white background area. You can use the following CSS to change that.
```
.site-description {
    color: #fff;
}
```
On the site logo, have you tried adding it at Customize > Site Title, Tagline, and Logo? If that doesn’t work for you, let me know and we can see about adding your logo directly in the CSS. I see a few in your Media Library. If you could let me know which you want to use, that would be great. Also, how big do you want it to be in the header area?
lynseyannphotography · Member · Jun 22, 2016 at 8:36 pm
Copy link
Thanks for your response.

I have managed to input the CSS for the background colour and this has worked.

I have however tried to input the CSS for the text colour but can’t seem to get this to change to black?

The logo currently on the media library is the logo we want… we would like the logo with the incorporated company name adding with a tagline ‘Documentary Wedding Photographer’ just below. The size of the logo would need to look right whether the website is viewed on desktop, tablet or smartphone.

Thanks for your help so far.

Lynsey-Ann
thesacredpath · Member · Jun 22, 2016 at 8:41 pm
Copy link
I went into your customizer and added this
```
.site-description {
    color: #777;
}
```
and the color of the tagline changed to grey. When you inserted the code, did you edit the color code? The #fff is the original white.
lynseyannphotography · Member · Jun 22, 2016 at 9:00 pm
Copy link
Apologies i didnt know the colour code for black.

I just inserted the CSS you provided and it didnt change… which it wouldnt obviously if thats the standard white colour code. So can you confirm the colour code for black text please?

Also can you assist with the logo issue?

The size and position needs to be viewable on all desktops, tablets and smartphones. I also want it closer to the tagline.

thanks in advance

Lynsey-Ann

thesacredpath · Member · Jun 23, 2016 at 12:58 am

Lynsey-Ann, add this to the end of your existing CSS, it does everything you asked. Look it over on phone and tablet, and on your computer and let me know what you think.

.site-title {
    background: rgba(0, 0, 0, 0) url("https://lynseyannphotographycomblog.files.wordpress.com/2016/06/logo4.png") no-repeat scroll center bottom;
    color: rgba(0, 0, 0, 0);
    height: 250px;
}
#masthead {
    background-color: rgba(255, 255, 255, 0.95);
}
.site-description {
    color: #000;
    margin-bottom: 00px;
}
.site-title a {
    color: rgba(0, 0, 0, 0);
    text-shadow: none;
}
.site-text-contain {
    height: 360px;
}

thesacredpath · Member · Jun 23, 2016 at 1:02 am
Copy link
On color codes, you may want to take a look at this site. If you do a search on the web for “web smart hex color codes” (without the quotes) a number of resources will come up.
lynseyannphotography · Member · Jun 24, 2016 at 3:16 pm
Copy link
Okay great we’re making progress.

I now feel the text on my logo is to different to the text option of the tagline, also the logo text isn’t quite sharp enough. I have added a logo of just the image without the text into the media library… is there away to add Lynsey-Ann Photography between the logo and the tagline in a typed font?

That way the text will be clearer and match in better.

I have published the site with how it is currently so you are able to see…

Thanks again for your help so far.

Cheers

Lynsey-Ann

thesacredpath · Member · Jun 24, 2016 at 7:57 pm

Hi, see what you think with this. Replace the .site-title rule I gave with the following

.site-title {
    background: rgba(0, 0, 0, 0) url("https://lynseyannphotographycomblog.files.wordpress.com/2016/06/logo-copy11.png") no-repeat scroll center bottom;
    height: 350px;
    line-height: 0.8;
}

and then replace the .site-title a rule with this

.site-title a {
    font-size: 60px;
}

lynseyannphotography · Member · Jun 24, 2016 at 8:30 pm
Copy link
Hi,

Ive replaced the first CSS instruction and then I’m unsure where the 2nd instruction is meant to be inputted. Ive placed it where i think, however that adds the Lynsey-Ann Photography above the logo and in a complete different text.

We want the Lynsey-Ann Photography to fit in-between the bottom of the logo and the tagline ‘documentary wedding photographer’.

so it reads:

Logo (company logo as per media gallery)
Lynsey-Ann Photography (company name / site title)
Documentary Wedding Photographer (tagline)

Thanks

Lynsey-Ann

thesacredpath · Member · Jun 25, 2016 at 7:41 pm

This is more complex. Remove this from your custom CSS

.site-title {
	background:rgba(0,0,0,0) url('https://lynseyannphotographycomblog.files.wordpress.com/2016/06/logo-copy4.png') no-repeat scroll center bottom;
	color:rgba(0,0,0,0);
	height:300px
}

and then add this to the very bottom of your custom CSS.

.site-title {
  background: rgba(0, 0, 0, 0) url("https://lynseyannphotographycomblog.files.wordpress.com/2016/06/logo-copy11.png") no-repeat scroll center top;
  height: 250px;
  line-height: 0.8;
	padding-top: 130px;
}
@media screen and (max-width: 1000px) {
	.site-title {
		padding-top: 160px;
	}
	.site-title a {
		font-size: 45px;
	}
}
@media screen and (max-width: 675px) {
	.site-description {
		margin-top: 40px;
	}
	.site-text-contain {
		height: 250px !important;
	}
}
@media screen and (max-width: 400px) {
	.site-title a {
		font-size: 35px;
	}
	.site-title {
		padding-top: 185px
	}
	.site-description {
		font-size: 120%
	}
}

lynseyannphotography · Member · Jun 25, 2016 at 8:27 pm
Copy link
Hi,

I have followed the instructions however the Lynsey-Ann Photography isn’t appearing?

I don’t think i have done anything incorrectly.

Cheers

Lynsey-Ann
thesacredpath · Member · Jun 27, 2016 at 10:28 pm
Copy link
Lynsey-Ann, find the following rule in your custom CSS and remove it to bring back the title.
```
.site-title a {
    color: rgba(0, 0, 0, 0);
    text-shadow: none;
}
```
lynseyannphotography · Member · Jun 28, 2016 at 2:38 pm
Copy link
Thats great, i can get the Lynsey-Ann Photography back.

Is there a way to alter the text of the Lynsey-Ann Photography through CSS? Im after something similar to the tagline text.

Thanks

Lynsey-Ann
thesacredpath · Member · Jun 28, 2016 at 10:08 pm
Copy link
The site title font is actually the same as the tagline, but looks different due to it being all caps and having the text shadow. If you modify the .site-tilte a rule you have to the following, you can see it without the shadow and caps, and smaller.
```
.site-title a {
    color: #000;
    text-shadow: none;
    text-transform: none;
    font-size: 60px;
}
```
lynseyannphotography · Member · Jun 29, 2016 at 3:17 pm
Copy link
Excellent – i have published the final version now and we’re happy with the result.

Thanks so much for all your help, its very much appreciated.

Lynsey-Ann
thesacredpath · Member · Jun 29, 2016 at 5:04 pm
Copy link
It looks great, and you are welcome.

The topic ‘Website logo and site title background on Snaps.’ is closed to new replies.

Website logo and site title background on Snaps.

Couldn't find what you needed?

Contact us

Browse our guides

Mobile Apps

Social Media