Docs

[ladyships]

hello again!

i’m trying to reproduce the same CSS styling that’s used for the title of Archive pages in the Integrity stack—with the lines on either side of the title text, & i’m a little confused about it.

so i managed to find this code in the integrity-light.css, which i think is what defines the lines:

.h-landmark span{display:inline-block;position:relative}
.h-landmark span:before,
.h-landmark span:after{content:"";position:absolute;top:50%;height:1px;width:275%;display:block;background-color:#e1e1e1;background-color:rgba(0,0,0,0.1);box-shadow:0 1px 0 0 rgba(255,255,255,0.795)}
.h-landmark span:before{right:100%;margin-right:0.5em}
.h-landmark span:after{left:100%;margin-left:0.5em}

& then i have the custom field (date_range) that i want to add that styling to in content.php:

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-featured">
    <?php x_featured_image(); ?>
  </div>
  <div class="entry-wrap">
  	<div class="date-range"><?php the_field('date_range'); ?></div>
    <?php x_get_view( 'integrity', '_content', 'post-header' ); ?>
    <?php x_get_view( 'global', '_content' ); ?>
  </div>
  <?php x_get_view( 'integrity', '_content', 'post-footer' ); ?>
</article>

so i added styling to the date_range field with this code in my child theme’s custom CSS:

div.date-range {
font-size: 18px;
color: #00588F;
font-family: 'Abril Fatface';
padding-bottom: 1px;
text-align: center;
}

but now i’m a little confused about how to integrate the code i found in integrity-light.css into the date-range class.

do i need to add a <span> tag to content.php? if so…where do i add it?

& other than changing the class from h-landmark to date-range, do i need to do anything else to that CSS code i found in integrity-light.css?

i’m pretty sure this is something stupidly simple, but i’m not a coder, so it’s not clear to me. i don’t really understand how pseudo elements work.

[Thai]

Hey There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Author]

Posts