Is there a way to add new div class via a theme's Additional CSS interface?

admin管理员组

文章数量:1326278

I am trying to modify a woocommerce website and I have very little HTML/CSS training. Most of what I've learned has come from trial and error, some online tutorials, playing around with the developer console in Chrome, etc....

I'm trying to add an image border to the top of a page header right before an area called tg-container. I was able to put one below it, using an existing class, whose info I didn't need to see. Can it be done with the Additional CSS interface built into the theme or do I have to go into the style.css and html to create the boarder? I know the benefit of the Additional CSS interface is having no need to edit the theme files directly whenever the theme is updated.

Bypass Page

Example Page with border - accessible only after bypass page is visited

IMAGE: Example page with Chrome Developer Console open and showing code for area

-------------------- Further Experimentation-------------------------

I created a child theme and am trying to add it that way, but I am missing something (because I'm not a coder), I was able to create the area for the image, but the image isn't showing up. I've tried adding it in the child theme and in the parent theme (editing style.css and page.php).

In the page.php of the child (and the parent) (after the following)

<div class="page-header clearfix">
            <div class="tg-container">

I added

<h3 class="title-border"> </h3>

I've tried this in the style.css of the child:

/*Add Wycinanki Borders*/

.title-border {
  background-image: url(".jpg-e1596302126833.jpg");
  background-repeat: repeat-x;
  font-weight: 600;
  color: #3b3b3b;
  font-size: 14px;
  line-height: 30px;
  margin: 5px 0;
}

I've tried this in the style.css of the child:

/*Add Wycinanki Borders*/

.page-header .title-border {
  background-image: url(".jpg-e1596302126833.jpg");
  background-repeat: repeat-x;
  font-weight: 600;
  color: #3b3b3b;
  font-size: 14px;
  line-height: 30px;
  margin: 5px 0;
}

I've tried this in the style.css of the parent:

.page-header .title-border {
        background-image: url(".jpg-e1596302126833.jpg");
        background-repeat: repeat-x;
        font-weight: 600;
       color: #3b3b3b;
    font-size: 14px;
    line-height: 30px;
    margin: 5px 0; }

Again, it has created the space for the image, but the image isn't showing up. I copied the other attributes from the "entry-sub-title", where I was able to put the image successfully, thinking that they would be styled the same way.

Thanks for any insight and helping me learn what I'm doing, hahaha.

I am trying to modify a woocommerce website and I have very little HTML/CSS training. Most of what I've learned has come from trial and error, some online tutorials, playing around with the developer console in Chrome, etc....

I'm trying to add an image border to the top of a page header right before an area called tg-container. I was able to put one below it, using an existing class, whose info I didn't need to see. Can it be done with the Additional CSS interface built into the theme or do I have to go into the style.css and html to create the boarder? I know the benefit of the Additional CSS interface is having no need to edit the theme files directly whenever the theme is updated.

Bypass Page

Example Page with border - accessible only after bypass page is visited

IMAGE: Example page with Chrome Developer Console open and showing code for area

-------------------- Further Experimentation-------------------------

I created a child theme and am trying to add it that way, but I am missing something (because I'm not a coder), I was able to create the area for the image, but the image isn't showing up. I've tried adding it in the child theme and in the parent theme (editing style.css and page.php).

In the page.php of the child (and the parent) (after the following)

<div class="page-header clearfix">
            <div class="tg-container">

I added

<h3 class="title-border"> </h3>

I've tried this in the style.css of the child:

/*Add Wycinanki Borders*/

.title-border {
  background-image: url("https://store.dolina/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
  background-repeat: repeat-x;
  font-weight: 600;
  color: #3b3b3b;
  font-size: 14px;
  line-height: 30px;
  margin: 5px 0;
}

I've tried this in the style.css of the child:

/*Add Wycinanki Borders*/

.page-header .title-border {
  background-image: url("https://store.dolina/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
  background-repeat: repeat-x;
  font-weight: 600;
  color: #3b3b3b;
  font-size: 14px;
  line-height: 30px;
  margin: 5px 0;
}

I've tried this in the style.css of the parent:

.page-header .title-border {
        background-image: url("https://store.dolina/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
        background-repeat: repeat-x;
        font-weight: 600;
       color: #3b3b3b;
    font-size: 14px;
    line-height: 30px;
    margin: 5px 0; }

Again, it has created the space for the image, but the image isn't showing up. I copied the other attributes from the "entry-sub-title", where I was able to put the image successfully, thinking that they would be styled the same way.

Thanks for any insight and helping me learn what I'm doing, hahaha.

• css

Share Improve this question edited Aug 2, 2020 at 21:18 Kazimierz asked Aug 1, 2020 at 19:34 KazimierzKazimierz 1122 bronze badges 2

• Can you use the chrome developer console to find the <h3 class="title-border"> </h3> element on the page and see how big it is? I'd guess it's too small to see any visible background in, and has possibly been collapsed down to nothing since it only has whitespace in it. Why h3, why not something else for the background? – Rup Commented Aug 3, 2020 at 0:45
• I was merely copying the info from entry-sub-title, the area that I was able to add the same border below the page title (aka entry-title): <br/> <div class="tg-container"> <h3 class="title-border"> </h3> <h1 class="entry-title">Contact</h1> <h3 class="entry-sub-title"><div id="crumbs" xmlns:v="http://rdf.data-vocabulary/#"><span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="https://store.dolina/pl/">Home</a></span>&nbsp;⁄&nbsp;<span class="current">Contact</span></div></h3> </div> – Kazimierz Commented Aug 3, 2020 at 12:18

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Ok, I got it figured out. I added <div class="title-border-top"> </div> above the page title (and actually added <div class="title-border-bottom"> </div> below for future modification.

I then added the following in the Additional CSS:

.page-header .title-border-top{
    background-image: url("https://store.dolina/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
    background-repeat: repeat-x;
    height: 30px;
            margin: 10px;
}

It is working and I hide the entry-sub-title I had taken over for the border to begin with. Now I have to figure out which page templates WP is pulling for all the main pages, so I can add the html to them.

本文标签： Is there a way to add new div class via a theme39s Additional CSS interface