CSS for Organization Theme

toddenglishenterprises · Member · Aug 27, 2013 at 8:18 pm
Copy link

Add topic to favorites
Hello,

I am trying to change the colors and size for the Search Here & Go on the upper left corner, the “Learn More” buttons, and the post tabs (they are currently in black).

Does anyone have the codes for these items?

Also, how can I make the text on the blog as a whole smaller?

Thanks so much!!!

The blog I need help with is: (visible only to logged in users)
toddenglishenterprises · Member · Aug 27, 2013 at 8:18 pm
Copy link
Upper right corner for the Search Here & Go**
thesacredpath · Member · Aug 27, 2013 at 10:48 pm
Copy link
This is for the search text field. I included background and font color and font size.
```
.header-search #searchform .search-field {
background: #FFFFFF;
color: #666666;
font-size: 1em;
}
```
For the “Go” button and learn more buttons:
```
a.btn, a.button, .reply a, #searchsubmit, #prevLink a, #nextLink a, .more-link, #submit, #comments #respond input#submit, form input[type="submit"] {
background-color: #F9F9F9;
color: #666666 !important;
font-size: 1.06em;
}
```
Add this and then adjust the 1.06em value as you desire. It is the base setting for most all fonts in your site. Originally it was 0.9em, but when you added the custom font, it bumped it up to 1.06em.
```
body {
font-size: 1.06em !important;
}
```
toddenglishenterprises · Member · Aug 29, 2013 at 2:07 pm
Copy link
Thank you so much!!! Do you know if there is a way to put the social media icons on the top of the site instead of the bottom on this theme?
thesacredpath · Member · Aug 29, 2013 at 7:19 pm
Copy link
Give this a try. I’ve added some @media rules to keep things from breaking badly since we have to use position: absolute to move them up to the top. Make sure and narrow your browser window down to smartphone size, and even view it in a smart phone to see what it looks like.
```
@media (max-width:640px) {.row {height:120px;}}
@media (max-width:640px) {.social-icons {width: 300px; top: 50px; margin-left: 0;}}

.row, .columns {
    position: inherit;
}

.social-icons {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 35%;
}
```
toddenglishenterprises · Member · Aug 29, 2013 at 7:22 pm
Copy link
wow that worked! how do i add in the links?
toddenglishenterprises · Member · Aug 29, 2013 at 7:24 pm
Copy link
and alter the tan color to #8B4513
i’ll send you some cupcakes for all the help!! :) thanks so much!!!
thesacredpath · Member · Aug 29, 2013 at 10:30 pm
Copy link
@isabellescurlycakes, don’t send those cupcakes yet. I’m having to discuss this with the team to figure out how to get the links working.
thesacredpath · Member · Aug 30, 2013 at 5:03 pm
Copy link
@isabellescurlycakes, given the structure of this theme, moving the existing social icons up to the top. What about adding them to the top navigation menu? That we can do cleanly without problems I think. Let me know if you want me to work up the code on that.
toddenglishenterprises · Member · Aug 30, 2013 at 6:23 pm
Copy link
that would be awesome!! anyway to have them up top and accessible would be great!! thank you so so much
thesacredpath · Member · Aug 30, 2013 at 7:08 pm
Copy link
You are welcome, and I’ll get to work on that right now and post back here with the code when I’m done.

thesacredpath · Member · Aug 30, 2013 at 10:08 pm

Hi there, first off, you can take a look to see what the icons will look like in the menu in my test blog: http://flippintestblog.com/ . When someone with a narrow screen (767px in width or less) views the site, the standard menu at top turns into a single menu bar that you then click (tap) to show the menu. The change I made goes awry when that happens, so we are going to exclude the top social icons for narrower browsers (less than 767px wide).

This might seem a little complex, but once you have done one, it will become more clear.

1. Create custom link menu items in a custom menu for your six social icons and put in the appropriated link. I would suggest using a single character for the label for each (f for facebook, t for twitter, etc.). For the email icon (envelope) you will put this mail link: mailto:(email visible only to moderators and staff)

In each of the menu items, under CSS Classes, you will be putting a CSS class as follows and then save the menu after creating them and putting in the CSS classes.

facebook: icon-facebookbefore
twitter: icon-twitterbefore
google +: icon-google-plusbefore
pinterest: icon-pinterestbefore
instagram: icon-instagrambefore
email: icon-envelopebefore

2. Visit your site and view the source code, or use the browser developer tool to get the menu item ID numbers for each of the social menu items. They will look something like this: menu-item-459. The number part is what you will need to substitute in the code I have below for each social menu item (example: 2433 in the facebook code).

@media (max-width: 767px) {
#menu-item-2433, #menu-item-2434, #menu-item-2435,#menu-item-2436, #menu-item-2437, #menu-item-2438 {
    display: none;
}
}

.menu a {
    line-height: 3;
}

Facebook

#menu-item-2433 a:before {
	content: "";
	display: inline-block;
	visibility: visible !important;
	color: #69412A;
	font-size: 200%;
	line-height: 80%;
	font-weight: bold;
	margin-left: 1px;
	position: absolute;
	top: 17px;
	left: 17px;
}

#menu-item-2433 a {
	background: none repeat scroll 0 0 #FFC0CB;
	border-radius: 50% 50% 50% 50%;
	font-family: FontAwesome;
	width: 25px;
	color: #EDA8BE;
	color: rgba(255,255,255,0);
}

Twitter:

#menu-item-2434 a:before {
	content: "";
	display: inline-block;
	visibility: visible !important;
	color: #69412A;
	font-size: 200%;
	line-height: 5px;
	font-weight: bold;
	margin-left: 1px;
	position: absolute;
	top: 24px;
	left: 13px;
}

#menu-item-2434 a {
	background: none repeat scroll 0 0 #FFC0CB;
	border-radius: 50% 50% 50% 50%;
	font-family: FontAwesome;
	width: 25px;
	color: #EDA8BE;
	color: rgba(255,255,255,0);
}

Google +:

#menu-item-2435 a:before {
    content: "";
	display: inline-block;
	visibility: visible !important;
	color: #69412A;
	font-size: 200%;
	line-height: 5px;
	font-weight: bold;
	margin-left: 1px;
	position: absolute;
	top: 24px;
	left: 13px;
}

#menu-item-2435 a {
	background: none repeat scroll 0 0 #FFC0CB;
	border-radius: 50% 50% 50% 50%;
	font-family: FontAwesome;
	width: 25px;
	color: #EDA8BE;
	color: rgba(255,255,255,0);
}

Pinterest:

#menu-item-2436 a:before {
    content: "";
    display: inline-block;
	visibility: visible !important;
	color: #69412A;
	font-size: 200%;
	line-height: 5px;
	font-weight: bold;
	margin-left: 1px;
	position: absolute;
	top: 24px;
	left: 13px;
}

#menu-item-2436 a {
	background: none repeat scroll 0 0 #FFC0CB;
	border-radius: 50% 50% 50% 50%;
	font-family: FontAwesome;
	width: 25px;
	color: #EDA8BE;
	color: rgba(255,255,255,0);
}

Instagram:

#menu-item-2437 a:before {
    content: "";
    display: inline-block;
    visibility: visible !important;
	color: #69412A;
	font-size: 200%;
	line-height: 5px;
	font-weight: bold;
	margin-left: 1px;
	position: absolute;
	top: 24px;
	left: 13px;
}

#menu-item-2437 a {
	background: none repeat scroll 0 0 #FFC0CB;
	border-radius: 50% 50% 50% 50%;
	font-family: FontAwesome;
	width: 25px;
	color: #EDA8BE;
	color: rgba(255,255,255,0);
}

Email (envelope):

#menu-item-2438 a:before {
    content: "";
    display: inline-block;
    visibility: visible !important;
    color: #69412A;
	font-size: 200%;
	line-height: 5px;
	font-weight: bold;
	margin-left: 1px;
	position: absolute;
	top: 23px;
	left: 11px;
}

#menu-item-2438 a {
	background: none repeat scroll 0 0 #FFC0CB;
	border-radius: 50% 50% 50% 50%;
	font-family: FontAwesome;
	width: 25px;
	color: #EDA8BE;
	color: rgba(255,255,255,0);
}

Let me know how things go, and if you have any problems.

thesacredpath · Member · Aug 30, 2013 at 10:11 pm
Copy link
If after inserting the code and doing what I have outlined, the icons do not show up in the menu, let me know. I’m not sure if the codes will copy/paste properly for the “content” items.
toddenglishenterprises · Member · Sep 3, 2013 at 1:08 am
Copy link
So that worked!

Few things –
How can I have both menus in the header? Right now it is just allowing either or.

I tried to go back and delete the titles “F” (for Facebook), “T” (for Twitter) etc. but it deleted the whole link. Is there a way to hide those titles so only the icons show?

Also, is there a way to shrink the pink circles a bit? i tried to decrease in that CSS code however I kept messing up the format.

Thank you so so much!
toddenglishenterprises · Member · Sep 3, 2013 at 2:42 pm
Copy link
hi sacredpath –

so i got the icons without the letters behind, on the same menu bar, and formatted to the right hand side of the header. just one last question about size and mobile. when i look on the phone, the are just pink circles and scattered. any insight?

Thank you so very much!
thesacredpath · Member · Sep 3, 2013 at 9:18 pm
Copy link
@isabellescurlycakes, Since your theme is a responsive width theme, it will automatically adjust to the screen size it is being viewed on. Go to Appearance > Mobile and disable the mobile theme as it will not show the social icons.

I took a look at your custom CSS and also see that the @media rule was not put in with the rest of the code. Add the following to the bottom of your CSS. The second and third rules below set a background color for the menu (hover and non-hover) when viewed on a mobile or tablet.
```
@media (max-width: 768px) {
	#menu-item-713, #menu-item-714, #menu-item-715, #menu-item-716, #menu-item-717, #menu-item-718 {
		display: none;
	}
}

@media (max-width: 768px) {
	.mobile-menu a {
		background: #FFFFFF;
		background: rgba(255,255,255,0.8);
	}
}

@media (max-width: 768px) {
	.mobile-menu a:hover {
		background: #774F38;
	}
}
```
toddenglishenterprises · Member · Sep 3, 2013 at 9:34 pm
Copy link
that worked! is there a way to remove the circle image on the header? i changed the colors so that its the same as the menu but the circles still appear.

thank you!!
thesacredpath · Member · Sep 3, 2013 at 9:45 pm
Copy link
Yes, to remove the circles, remove the background declaration from the 6 rules with selectors similar to this one:

#menu-item-716 a
thesacredpath · Member · Sep 3, 2013 at 9:46 pm
Copy link
Oh, and you can remove the border radius declaration as well from those.
toddenglishenterprises · Member · Sep 3, 2013 at 9:52 pm
Copy link
so great! thank you so much! you’re the best!

1 2

The topic ‘CSS for Organization Theme’ is closed to new replies.

CSS for Organization Theme

Couldn't find what you needed?

Contact us

Browse our guides

Mobile Apps

Social Media