Enter custom CSS

This topic has 36 replies, 3 voices, and was last updated 8 years, 10 months ago by Sakin.

Viewing 20 posts - 1 through 20 (of 37 total)

1 2 →

Author

Posts
June 4, 2015 at 1:35 am #58871

helpme
Participant

Hi I am trying to make a few changes to my Catch Responsible Free theme:-
Change font of Site Title and center it
Change font to ROBOTO for all of the site
Change font and colour of Menu text and center it. (firstly I tried to remove the search box from the menu bar but when I went into the Navigation I only got two options Select or Menu – no option to disable search box).
Remove the black background in the menu bar

I have read the forums and tried to add the codes to make the changes in the Enter Custom CSS box, then hit save and publish and nothing happens! Can you tell me what I am doing wrong. I am working on an ipad. Thank you

June 4, 2015 at 2:29 am #58889
Sakin
Keymaster
@helpme: Can you post in your site URL so me to check in details.
1. To center the site title, either you need to disable header right section or move header right section below your site title. So, let me know what you want.
2. To change font to Roboto google font, you need to install Google Font plugin or upgrade to Catch Responsive Pro theme, where you will get option to change the font.
3. This option is there in pro version. In free version, you need to do with custom css. So, add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box to hide the search toggle and center the menu.
```
#search-toggle {
    display: none;
}
.nav-primary.search-enabled .menu {
    text-align: center;
    width: 100%;
}
.catchresponsive-nav-menu li {
    float: none;
}
```
4. If you remove the background color of the menu, then the white text will not be visible. So, can you send me exact color code that you want to change to.
June 5, 2015 at 12:00 am #58939

helpme
Participant

hi
1. sorry not sure what the header right section is. If it is a logo holder then this can be disabled since I don’t have a logo (forgot to include that I wanted the sub title centered and font colour changed too)
2. I already have easy google font plugin installed – will that work ?
3. thank you
4. I like the colour on url: ellaprettyblog.blogspot.co.uk The beige text but don’t know what the code is though. I am looking for a similar styling ie large beige text for site name, small italic text for the sub title and the menu text the same beige with a light pink menu background.
many thanks again

June 5, 2015 at 6:58 pm #58993

Sakin
Keymaster

@helpme: Please post in your site URL fist.

June 5, 2015 at 9:03 pm #59003

helpme
Participant

I am not live on my site yet so I don’t think you can see it ?

June 6, 2015 at 1:48 am #59014

helpme
Participant

I have managed to center my navigation bar and changed the background colour of it, but how do I change the text colour for it ?

Also still need to center the Title and sub-title and change the font for them. Do not want the search box in the header either.

thank you

June 6, 2015 at 2:38 am #59023
Sakin
Keymaster
@helpme:
1. For header center and hide search, you can add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:
```
.sidebar-header-right { display: none; }
#site-branding { width: 100%; text-align: center; }
#site-header { display: block; width: 100%; }
```
2. To change the menu text color, you can change the color code in the following css and then add it in “Appearance => Customize => Theme Options => Custom CSS Options” box:
```
/* Menu Text Color */
.catchresponsive-nav-menu a {
    color: #fff;
}
/* Current Menu Text Color */
.catchresponsive-nav-menu .current-menu-item > a, 
.catchresponsive-nav-menu .current-menu-ancestor > a, 
.catchresponsive-nav-menu .current_page_item > a, 
.catchresponsive-nav-menu .current_page_ancestor > a {
    color: #000;
}
/* Hover Menu Text Color */
.catchresponsive-nav-menu li:hover > a {
    color: #000;
}
```
June 6, 2015 at 2:55 am #59027

helpme
Participant

thank you much Sakin – my site is really coming together.

I want to make the site title bigger
I want to make the sub title bigger and italic
I want to make the text in the description for categories italic

Are the css codes for these ?

thank you again

June 9, 2015 at 1:40 am #59157
Sakin
Keymaster
@helpme: Ok you can change the font size in the following as per your need and then add it in “Appearance => Customize => Theme Options => Custom CSS Options” box:
```
/* site title font size */
.site-title { font-size: 38px; }
/* sub title font size and italic */
.site-description { font-size: 14px; font-style: italic; }
/* category description italic */
.taxonomy-description { font-style: italic; }
```
June 9, 2015 at 2:31 am #59160

helpme
Participant

Wow you are good.

Thanks

June 10, 2015 at 1:44 am #59239

helpme
Participant

Hi, The text under Recent Posts, Archives, Categories, Meta and the “Date and add Comments” for my posts is Blue – can I change it to colour ddcdad and italic ?

I have a description for each of my categories which appears below the category name can I have it above the category name ?

Thank you

June 10, 2015 at 4:46 am #59247
Sakin
Keymaster
@helpme: Those are link, if you want to change the link color, then you can add the following css:
a { color: #ddcdad; }

To change the description from below to above, you need to build child theme, for child theme refer to http://catchthemes.com/blog/create-child-theme-wordpress/ and then copy archive.php file to your child theme and move the following code below h1
```
<?php
	// Show an optional term description.
	$term_description = term_description();
	if ( ! empty( $term_description ) ) :
		printf( '<div class="taxonomy-description">%s</div>', $term_description );
	endif;
?>
```
June 11, 2015 at 1:09 am #59299

helpme
Participant

That seems slightly complicated not sure if I can tackle that right now – I don’t want to mess up the site. But have changed the link colour thank you.

June 20, 2015 at 7:58 pm #59840

helpme
Participant

Hi Sakin, my site title is not automatically reducing for my iphone screen. Can you help? thank you http://www.perfecting50.co.uk

June 20, 2015 at 8:17 pm #59841

helpme
Participant

Also, I have added

/* Hide Author */
.entry-meta .by-author { display: none; }

but it has only removed author on the home page. How do I get rid of author on the individual post pages too?

thanks,

June 20, 2015 at 8:22 pm #59842

helpme
Participant

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

All the above text is appearing at the bottom of my posts – can I get rid of this ?

Thank you

June 21, 2015 at 4:27 am #59857
Sakin
Keymaster
@helpme:
1. Your site Title and tagline is not reducing in mobile devices as your have fixed size in custom css. Either you need to remove that or add mobile devices size. You can add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” Box:
```
/* Mobile Font Sized for Title and Tagline
@media screen and (max-width: 768px) {
    .site-title { font-size: 28px; }
    .site-description { font-size: 18px; }
}
```
2. You can add the following css to hide author from entire site.
.entry-meta .by-author, .entry-meta .byline { display: none; }

3. For comment text, you can remove that from option panel directly in Pro version but in free version, you can hide it with custom css. For that, you can add the following css:
.form-allowed-tags { display: none; }
June 23, 2015 at 1:32 am #59928

helpme
Participant

Fabulous thank you.

How come Heading1 is not recognised on the home and category pages but it is on the post page ?

thanks,

June 23, 2015 at 1:41 am #59929

Sakin
Keymaster

@helpme: I don’t get it what you mean. There will be h1 tag in each section.

June 23, 2015 at 1:58 am #59931

helpme
Participant

On the posts the Heading1 is obvious, bigger text and a paragraph on its own, but on the home page and the category page the Heading1 shows as part of the first paragraph.
Author

Posts