WordPress.org

1. _DIoniz_
   Member
   Posted 4 months ago #

   I would like to know if there is any way to change one div css style option, without the creation of child theme. All I want is to change one div css font style which gets overwritten by parenting css.

   Example:

   <div select name="Font" class="Font"><?php the_title(); ?></div>

   Here is my css:

   #homepage select.Font a:link{
      color: #d55e00;
   	font-family: 'LeagueGothicRegular' !important;
   	font-size: 36px;
   	font-weight: lighter;
   	margin-bottom: 40px;
   	padding-bottom: 6px;
   	text-decoration: none;
   	text-transform: uppercase;
   }

   The css repeats for all a: features.

2. James Edmonston
   Member
   Posted 4 months ago #

   Surely it'd be:
   

   #homepage div.Font a:link{
      color: #d55e00;
   	font-family: 'LeagueGothicRegular' !important;
   	font-size: 36px;
   	font-weight: lighter;
   	margin-bottom: 40px;
   	padding-bottom: 6px;
   	text-decoration: none;
   	text-transform: uppercase;
   }

3. _DIoniz_
   Member
   Posted 4 months ago #

   Thank you for your reply...But the solution doesn't seem to work. It seem that parenting css is still overwriting my div tag. And the creation of child theme would be out of the option, because of the nature of my design. Here is the link of my webpage. It is in my native language. I want to change the fonts in the titles of thumbnails below.

   Link

   Is there any possible way to disable parenting css?

   Thanks to everyone in advance.

4. Jan Dembowski
   Volunteer Mod. & Brute Squad
   Posted 4 months ago #

   And the creation of child theme would be out of the option, because of the nature of my design.

   ...

   Is there any possible way to disable parenting css?

   Yes... Have you tried to use a child theme...? Some themes did have a bug with child themes when they switched to wp_enqueue_script() but is that what's going on with your theme?

   I'm not familiar with thath Showcase theme but the creation of a directory wp-content/themes/showcase-child and putting in this style.css file

   /*
   Theme Name: Showcase Child Theme
   Description: Child theme for the Showcase theme
   Author: Your name here
   Template: showcase
   */
   
   @import url("../showcase/style.css");
   
   /* Your CSS begins here */
   
   #homepage div.Font a:link{
      color: #d55e00;
   	font-family: 'LeagueGothicRegular' !important;
   	font-size: 36px;
   	font-weight: lighter;
   	margin-bottom: 40px;
   	padding-bottom: 6px;
   	text-decoration: none;
   	text-transform: uppercase;
   }

   That should let you override the parent CSS selectively. When it's just CSS that's the best use case for a child theme.

   http://codex.wordpress.org/Child_Themes

   If that doesn't work then you should be able to just append your CSS to the bottom of the wp-content/themes/showcase/style.css file.

5. _DIoniz_
   Member
   Posted 4 months ago #

   Hmmm...I did try the creation of the child theme. But it doesn't work. Neither does the second solution...It seems there is something else that I am doing wrong.

   I have this theme which is by itself nice, but I wanted to slightly modify it by inserting a project page in homepage. Project page looks like this . The fonts under thumbnails is what I am trying to include into Homepage. The project page code is located in /showcase/taxonomy-portfolio file. I did insert a part of that php code into a homepage. But trouble is I simply cannot get the font style to work on my homepage site.

   I tried the creation of a child theme, but nothing happens when I set the div tag parameters.

   I tried inserting my css at the end of a main css file and nothing happens either.

   All in all it just raises more questions:)

6. Jan Dembowski
   Volunteer Mod. & Brute Squad
   Posted 4 months ago #

   I tried the creation of a child theme, but nothing happens when I set the div tag parameters.

   I think it's a CSS specificity problem and that your CSS is not spot on.

   Luckily there is an easy way to test if your child theme CSS is working or not.

   Create a child theme like I outline above, try using this in your child theme's style.css file:

   /*
   Theme Name: Showcase Child Theme
   Description: Child theme for the Showcase theme
   Author: Your name here
   Template: showcase
   */
   
   @import url("../showcase/style.css");
   
   #content div.body {
           background: #f00;
   }

   Activate that child theme for Showcase and visit your blog. Scroll down to the content and posts.

   If you eye's begin to hurt and you wish you hadn't seen that, then your child theme is working correctly. :) I just tried it myself on my Crash Test Dummy and my eyes are still watering.

   After that try using the Web Developer and Edit CSS plugins in Firefox to figure out the CSS for what you want to change. Once you've got the CSS, update your child theme style.css and you should be good to go.

   https://addons.mozilla.org/en-US/firefox/addon/web-developer/
   https://addons.mozilla.org/en-US/firefox/addon/editcss/

Reply

You must log in to post.