1

I'm trying to change the look of my website but while doing that, facing some problems.

Now, different classes and id's in style.css apply to all pages on my theme.

I want to overwrite those styles elements (only 2 or 3) on my homepage.

Now when I'm adding style in my index.php file, they are not being applied.

I've already tried marking them !important

Code snippets: I've added this code in my index.php file before the <?php code starts

<style type="text/css">
#main {
    margin-left: 0 !important;
}
.container {
    width: 95% !important;
}
</style>

But they are still not affecting the look of my homepage.

I've confirmed that the class and ids I'm using are perfect and are present in style.css file?

So, can you please guide me how to overwrite these element stylings only on my homepage?

OR

If I'm doing something wrong in the above process?

Improve this question
2
  • 1
    My gut feeling is that you are doing something wrong, but there is not enough information to tell for sure, nor is there enough code. Is this a theme you have written, or are you hacking another theme? There could be <php blocks all over the page, post your code in more context.
    – s_ha_dum
    Jun 6, 2015 at 16:30
  • No, this is not a theme written by me, but I've bought it from Themeforest. Now, first of all I added a support for this but later decided to do this myself. Just to learn something new :) Well, the problem's solved. Thanks.
    – Paras Shah
    Jun 7, 2015 at 14:36

2 Answers 2

Reset to default
1

Add this code in your theme's functions.php

add_action('wp_footer', 'my_home_page_styles', PHP_INT_MAX);
function my_home_page_styles() {
    if(is_front_page()) {
    ?>
    <style>
        #main {
            margin-left: 0 !important;
        }
        .container {
            width: 95% !important;
        }
    </style>
    <?php
    }
}

Don't forget to clearing your cache before refreshing. Use Ctrl + F5 to refresh in Google Chrome.

Improve this answer
5
  • 1
    A mere down vote is considered as non-constructive and an immature act. Give your proper argument in the comments.
    – Omar Tariq
    Jun 7, 2015 at 1:41
  • I've not voted down your answer. Infact, I see that this can be a possible way to apply the things I want. Thanks for that. Well, I am done with doing that by adding another class directly in style.css and then calling that class in PHP file.
    – Paras Shah
    Jun 7, 2015 at 13:56
  • 1
    I'm glad it helped you out. That message was meant for the downvoter :-|. The down voting rule asks to leave a comment explaining the down vote, but people usually don't care about it.
    – Omar Tariq
    Jun 7, 2015 at 14:27
  • 2
    All I would add is that since the theme is third party, adding this code to a plugin or mu-plugin file might be a better idea.
    – s_ha_dum
    Jun 7, 2015 at 17:43
  • Hey @OmarTariq and s_ha_dum. It seems you'll have a very good knowledge of PHP. So, can you help me with another task too, please? What I want to do is generate and validate a license key for a plugin only for a year. I will be much more grateful to you if you'd provide me the code to do it please. Because I'm just a starter with PHP and don't know much. All about what I want is written here: wordpress.stackexchange.com/questions/190742/…
    – Paras Shah
    Jun 8, 2015 at 4:35
1

Your home page has a class on the body called "home"

So in your style.css file

body.home #main {
  margin-left: 0;
}
body.home .container {
  width: 95%;
}

Since your comment claims there is no class called home. Here is a screenshot of the default wordpress twentyfifteen header.php file page attention to the body tag <body <?php body_class(); ?>>.

If this is not in your current theme you should add it.

enter image description here

Improve this answer
5
  • So, can I directly add like you mentioned above? I don't know whether that class "home" exists or not.
    – Paras Shah
    Jun 6, 2015 at 16:14
  • Well maybe using inspect element would help
    – Ace
    Jun 6, 2015 at 16:16
  • But there's no class called home. The classes are directly defined as #main and .container (I got these classes from Inspect Element only) :D Anyways, thanks for all this. I'll add another css class and call that class in the index.php file which would apply these changes :D
    – Paras Shah
    Jun 6, 2015 at 16:22
  • @ParasShah why don't you look at the default wordpress theme. My answer is correct your theme probably is not adding to the body tag.
    – Ace
    Jun 6, 2015 at 17:10
  • Yeah, you're correct. You have a point there and that's valid. Thanks for taking the time to help :D The problem got solved.
    – Paras Shah
    Jun 8, 2015 at 4:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.