Support » Themes and Templates » Add custom css to pages and single posts

  • I am using Omega parent theme by ThemeHall and I created a custom page template for pages within my child theme that I also created–now I’m trying to figure out how to apply custom css to those pages. Here is my custom page template:

    <?php
    /**
    * Template Name: Full Width
    *
    * @package Omega
    */

    get_header(); ?>

    <main class=”<?php echo omega_apply_atomic( ‘main_class’, ‘content’ );?>” <?php omega_attr( ‘content’ ); ?>>

    <?php
    do_action( ‘omega_before_content’ );
    do_action( ‘omega_content’ );
    remove_action( ‘omega_after_main’, ‘omega_primary_sidebar’ );
    ?>

    </main><!– .content –>

    <?php get_footer(); ?>

    I added this custom css to my stylesheet:

    .content-custom-page {
    float: center;
    width: 650px;
    }

    and then tried changing the instances of ‘content’ within the code lines:

    <main class=”<?php echo omega_apply_atomic( ‘main_class’, ‘content’ );?>” <?php omega_attr( ‘content’ ); ?>>

    to my custom css ‘content-custom-page’ thinking that this would call the ‘content-custom-page’ css that I added rather than the default ‘content’ css, but this is not working. I think I’m missing a step that has to do with functions? But I’m new to this so could be completely wrong. I’ve been trolling forums for 2 days now trying to find an answer 🙁 any help would be greatly appreciated!

Viewing 4 replies - 1 through 4 (of 4 total)
  • float: center; is no valid CSS; http://www.w3schools.com/css/css_float.asp

    is this CSS class .content-custom-page coming from your code or your theme?

    does the theme use body_class()? which should gove you specific CSS classes for your page template…

    have you asked the developer of the (parent) theme for help?

    Thread Starter tristanblair2

    (@tristanblair2)

    I’ve sent a message to the theme developer’s site but haven’t gotten a response yet.

    The CSS class .content-custom-page is my custom code that I added to my child theme’s stylesheet.

    I don’t think the theme uses body_class. I’m pretty sure that the lines of code below are what controls/refers to the css style to use:
    <main class=”<?php echo omega_apply_atomic( ‘main_class’, ‘content’ );?>” <?php omega_attr( ‘content’ ); ?>>
    (I copied this code from the parent theme’s “page.php” file when I created my “page_full-width.php” custom page template).

    I did have some luck by changing that line of code above:
    <main class=”<?php echo omega_apply_atomic( ‘main_class’, ‘content’ );?>” <?php omega_attr( ‘content’ ); ?>>

    change to:
    <main class=”<?php body_class( ‘main_class’, ‘content-custom-page’ );?>” <?php omega_attr( ‘content-custom-page’ ); ?>>

    whereas the ‘content-custom-page’ refers to the code snippet
    .content-custom-page {
    float: center;
    width: 650px;
    }
    which I placed in my child stylesheet. This actually centered my post on the page instead of leaving it left justified as if there were a sidebar there (which i removed with the line of code: remove_action( ‘omega_after_main’, ‘omega_primary_sidebar’ ); as seen above).

    However, while this is half of what I was trying to accomplish (center the content on the page rather than appear as if there’s an invisible sidebar), it is not reading my column pixel width of 650px which (I thought) I set in the CSS code and the content is appearing as wide as my screen.

    I hope this isn’t too jumbled and confusing :/ like i said…i am a beginner to this

    please aks the developer of the omega theme for help.

    this forum here is virtually unable to help with those detailed questions, as your (parent) theme is not one of the supported themes from https://wordpress.org/themes/.

    Thread Starter tristanblair2

    (@tristanblair2)

    That link which you posted is where I found and downloaded my parent theme. In fact, if you click on that link and search Omega, it is the first result that comes up, so I’m confused as to why it would not be supported by this forum.

    I’ve tried to seek help from https://themehall.com/omega but you must login to post a question on the forum, and (perhaps I’m being extremely dense here) I cannot for the life of me figure out how to register as a user to login to post my question. I’ve clicked on ‘login’ on the site and the only options it gives are to enter your credentials, or request a new password…there is no option to register for the first time as a new user. I sent a message via the contact form asking how I can login to post a question but have received no response.

    I’m feeling desperate at this point! Any further guidance or advice you can give would be very greatly appreciated.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Add custom css to pages and single posts’ is closed to new replies.