Add a new block on the home page

This topic has 9 replies, 3 voices, and was last updated 8 years ago by Mahesh.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
September 5, 2016 at 3:23 pm #98775

Michael Dresel
Participant

Hi,

This is my Website: http://traumhaftes-thailand.de/

It is under construction at the moment and I am trying to add a new section between the slider and featured-content. To do so, I think i have to write a new .php-file like the catchresponsive-featured-content.php. Or is there a easier way to add a new section to the welcome page?

September 5, 2016 at 4:46 pm #98779

Mahesh
Participant

@michael-dresel: For this, you’ll need to create a child theme. You can find more details on creating child theme HERE. Then you’ll need to customize further. If you are not familiar with coding/programming, I recommend you to hire a customizer.

Regards,
Mahesh

September 5, 2016 at 6:17 pm #98787

Michael Dresel
Participant

Thank you for your advice. I´ll try and see if i can handle it.

I got another question. I want to change the navigation. I already changed the Backgroundcolor via .nav-primary { background:#e4aa01;}

Now I want to change the font-color, but only within the navigation. I can´t figure out in which class i have to edit the link. Also i want to change the colors for
a:link
a:visited
a:active
a:hover

and the background color of the list. Can you send me the classes which i have to edit or maybe the CSS code?

Regards
Michael

September 6, 2016 at 10:28 am #98813
Mahesh
Participant
@michael-dresel: Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:
```
.catchresponsive-nav-menu .page_item > a,
.catchresponsive-nav-menu li > a
 {
	color: #ff0000;	
}
.catchresponsive-nav-menu .page_item > a:hover,
.catchresponsive-nav-menu li > a:hover {
	color: #ff00ff;	
}

.catchresponsive-nav-menu .page_item > a:visited,
.catchresponsive-nav-menu li > a:visited {
	color: #00ff00;	
}

.catchresponsive-nav-menu .page_item > a:active,
.catchresponsive-nav-menu li > a:active {
	color: #fff000;	
}

.catchresponsive-nav-menu .page_item > a:focus,
.catchresponsive-nav-menu li > a:focus {
	color: #000fff;	
}
```
Can you please explain in details what you mean by background color of the list so I can help you further.
Note: Please change the color as you desire.

Regards,
Mahesh
September 7, 2016 at 2:06 pm #98867

Michael Dresel
Participant

Thank you for the provided code. It was a great help and I could design it as I wanted to. Due to the amount of changes I plan, I think it is better if I switch to the “fabulous fluid”-theme. Thank you for you great support.

Regards,

Michael

September 7, 2016 at 3:51 pm #98870

Mahesh
Participant

@michael-dresel: Thank you for your appreciation. We are glad that you want to check our other themes too. Have a nice day!

Regards,
Mahesh

October 18, 2016 at 10:21 pm #101737

Mark
Participant

Hi Mahesh –

Can you help me understand when changes to the CSS should be done using “Appearance> Custom CSS” function vs actually editing the CSS?

As with Michael, I am trying to edit the way links work using
a:link
a:visited
a:active
a:hover
But in the body content links (not menu navigation links).

In your explanation to Micheal you point him to “.catchresponsive-nav-menu” . I assume this syntax would just change the menu navigation links. What would be the syntax for changing just the links in the body text?

I am using the Chicago-Pro theme.

Thank you in advance,
Mark

October 19, 2016 at 11:02 am #101754
Mahesh
Participant
@mjadkowskigmail-com: Its the same whether you edit the actual CSS or through Custom CSS. Custom CSS option is to make it easier for the users to override the style/design.
Go to Dasbhord=> Appearance=> Customize=> Theme Options=> Custom CSS and add the following CSS:
```
#content a {
    color: #ff0000;	
}
#content a:hover {
    color: #ff00ff;	
}

#content a:visited {
    color: #00ff00;	
}

#content a:active {
    color: #fff000;	
}

#content a:focus {
    color: #000fff;	
}
```
Note: Please change the color as desired.

Regards,
Mahesh
October 19, 2016 at 11:17 pm #101804

Mark
Participant

Thank you for your help Mahesh!
One more question (for now): Is there a guide anywhere that explains the naming of CSS elements used by Catch Themes? For example: Per you answer above it looks like the body text is named “#content” and navigation elements are named “.catchresponsive-nav-menu”. Is there a guide to these naming conventions? Also, are your naming conventions the same for all themes, or do they differ by theme?
Thank you again,
Mark

October 20, 2016 at 10:17 am #101830

Mahesh
Participant

@mjadkowskigmail-com: We almost follow the same convention, therefore, most the the elements have similar naming. And as for catchresponsive-nav-menu class, theme slug is taken for making it unique. However, you can know the id or class of any element through firebug or other similar tools.
Hope you understand.

Regards,
Mahesh
Author

Posts