Style Hook Element

[Sonja]

I have made a shortcut, which display the date. Then i have put this shortcut in a inside_secondary_navigation hook. Now i want to style this element, so that it shows in white color in specific font size and left in the second nav bar. How to do that?

I can not link to the site, because it is a closed dev site.

[David]

Hi there,

can you show us your shortcode code? There maybe a CSS class within the HTML it outputs to use for styling, if not we can add one.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sonja]

In the Hook, the shortcode is: [footer_date]

I made this shortcode with this snippet:

add_shortcode( 'footer_date', 'lh_footer_date' );
function lh_footer_date() {
    ob_start();
    echo date_i18n ('j. F Y');
    return ob_get_clean();
}

[David]

Change this line:

echo date_i18n ('j. F Y');

to:

echo '<span class="custom-date">' . date_i18n ('j. F Y') . '</span>';

You can then style the date like so:

.custom-date {
    font-size: 18px;
    color: #fff;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sonja]

The problem is, that the date is displayed above the navigation. But it should be beside it.

[Leo]

We will need to see the site in order to tweak the CSS.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts