Community Forums › Forums › Archived Forums › Design Tips and Tricks › Styling Site Tagline in Going Green Pro
Tagged: style tagline, tagline
- This topic has 3 replies, 2 voices, and was last updated 9 years, 5 months ago by joemeboe.
-
AuthorPosts
-
November 10, 2014 at 4:51 pm #131108joemeboeMember
Aloha all,
I submitted this question to the theme developer on studiopress.com, no response.
In Going Green Pro, I would like to style the site tagline (established 1914) at khs.hawaiiwebs.com.
Specifically, I would like to make it white, like the title.
That's good enough, but I'd also like to center it under the site title (Kauai Historical Society).
TIA.
Joe Meboe
http://khs.hawaiiwebs.comNovember 10, 2014 at 9:15 pm #131127LenParticipantHi joemeboe. If you open Going Green's style.css file and go to Line 930 you'll see this ...
.site-description { color: #287241; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 2px; margin: 0; text-transform: uppercase; }
Change this line ...
color: #287241;
to ...
color: #fff;
As for the 2nd question I'm assuming you want to center the site description under the site title as opposed to centering it on the page? If so, you could add a rule to the above something like ...
padding: 0 0 0 120px;
That will give you 0 padding on the top, left & bottom of the site description while applying 120px of padding to the left side. You'll want to adjust the 120px to your liking.
Now, if you do that you'll probably want to make one more change. In the responsive section of the style.css file, the site description is aligned to the center at the 1023px breakpoint. Scroll down to Line 1907 where you'll see this ...
@media only screen and (max-width: 1023px) {
Scroll down just a bit more to Line 1955 where you'll see this ...
`.genesis-nav-menu,
.site-description,
.site-header .title-area,
.site-header .search-form,
.site-title {
text-align: center;
}`See how text-align: center is applied to .site-description? That's fine, but remember we added some left padding earlier? We need to negate that now so everything lines up nicely.
So, just under that block add this ...
`.site-description {
padding: 0;
}`That will get rid of the padding we added earlier.
November 10, 2014 at 9:38 pm #131132LenParticipantHmmm, the formatting in my response somehow got mangled and I don't seem to be able to further edit it. So, I'll repost my answer.
Hi joemeboe. If you open Going Green’s style.css file and go to Line 930 you’ll see this …
.site-description { color: #287241; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 2px; margin: 0; text-transform: uppercase; }
Change this line …
color: #287241;
to …
color: #fff;
As for the 2nd question I’m assuming you want to center the site description under the site title as opposed to centering it on the page? If so, you could add a rule to the above something like …
padding: 0 0 0 120px;
That will give you 0 padding on the top, left & bottom of the site description while applying 120px of padding to the left side. You’ll want to adjust the 120px to your liking.
Now, if you do that you’ll probably want to make one more change. In the responsive section of the style.css file, the site description is aligned to the center at the 1023px breakpoint. Scroll down to Line 1907 where you’ll see this …
@ media only screen and (max-width: 1023px) {
Scroll down just a bit more to Line 1955 where you’ll see this …
.genesis-nav-menu, .site-description, .site-header .title-area, .site-header .search-form, .site-title { text-align: center; }
See how text-align: center is applied to .site-description? That’s fine, but remember we added some left padding earlier? We need to negate that now so everything lines up nicely.
So, just under that block add this …
.site-description { padding: 0; }
That will get rid of the padding we added earlier.
November 12, 2014 at 2:01 am #131268joemeboeMemberYou're the best, thanks, Len.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.