- Posts
Hello Kosuki07,
Thank you for your CSS questions. I am happy to answer them for you. For most of your questions, you will need to modify the CSS using the Advanced Tab in the Customizer.
To do that, click on the “Advanced” tab of the customizer. Next, click on the “Custom JS & CSS” tab. Then click on the “Custom Theme CSS” button to enter the CSS editor.
- The triangles on the page are not images. They are constructed with CSS. To remove the triangles at the top of the testimonial boxes, you will need to following code to the CSS Editor:
.palette-primary .mod-beta-1::before { display:none; }
- The color for the larger ‘downward’ triangles are governed by the section they are in. You can change that by selecting a different color in the customizer color palette. Again, the triangle is not an image, but created by CSS geometry. There is no simple way to add more of them since they are not a single object. The entire governing CSS section would need to be recoded to do so.
- The horizontal rule and it’s downward triangle are governed by different CSS classes. To change the color of the HR itself, use the code below (example to turn it white):
.palette-primary hr { background:white;}The small triangle color is changed with the code below (example also turns it white, but using hexadecimal code. You can is either interchangeably)
.palette-primary hr::after {border-top-color: #ffffff;}
- As for adding the image, you did it correctly. CSS can be very tedious even if you are the original author. Modifying and figuring out CSS classes written by someone else is even more so.When attempting to customize, there is often not an easy way to do something because you are changing the content from its original intent. But, with lots of trial and error, CSS can be tamed.
Kindest Regards,
Scott M
Website: http://www.aegisprotectiongroup.com/
#1
My boldgrid theme I use at the link above has some stuff I have questions about. I have searched the styles.css for the “customization” and I can not figure out how to edit some stuff. In the first image is the basic default theme wording and content, which ill be changing. I need to know how to edit the little triangle on the comment box. It is the triangle at the top of the box. It does not seem to be a image, and I can not edit it in the code.
LINK TO IMAGE: http://i.imgur.com/1YPWhxO.png
Here is the code for the Robin Column.<h5>Robin Wilson</h5>
<h6>Follow The Leader Dynamics</h6>
<div class=”row”>
<div class=”col-md-12 col-xs-12 col-sm-12″>
<div class=”mod-beta-1″>“After we dealt poorly with a product recall, we were worried that our business was going to fail. We had marketing people who could tell us how to promote our products, but nobody could tell us how to regain our customers’ trust and loyalty. Wedge’s Marketing Makeover program put us back in the game.”
</div>
</div>
</div>
</div>
</div>I know from the div class to look in the style sheet for mod-beta-1. However when I found it, I found nothing to point to that little triangle in his “robins” comment box below hiw picture.
#2
The separation between sub pages on the home page, has that same triangle, however it points down. I do not know how to edit the color, and look of that triangle. Say If I wanted 2 triangles, how do I edit that? I know this is the Call to Action and the Main home page. However, I can not edit the color or even remove or copy that little triangle. Here is a section of code that separates the sub pages as I call them.
Image Link: http://i.imgur.com/xlch9jB.png
Here is the code<div class=”container-fluid background-tertiary boldgrid-section” style=”background-color: #1c1c26;”>
<div class=”container”>
<div class=”row gridblock”>
<div class=”col-xs-1 col-sm-2 col-md-3″></div>
<div class=”col-xs-10 col-sm-8 col-md-6″>
<h2 class=”text-center”>Customer Testimonials</h2>
<div class=”row”>
<div class=”col-md-12 col-xs-12 col-sm-12″><hr>
#3
Next, he custom <hr> Horizontal rule, it is a purple line with that same down arrow on it… How do I edit this? I went to the styles CSS and could not find any customization for the <HR> The image for #2 shows the <hr>
#4
Last is the Call To Action edit for the main page. It literally took me till 2am from 10pm (4hours) to figure out how to add a image in the adjoining col. I had to copy the code from the text and just replace the text with the image, is there an easier way? Every time I just dropped the image it would throw it on the top of the page. I can not position it the way I want to and just have to edit the image in code as if it was text. Below is example.
Image Link: http://i.imgur.com/O8FWoDy.png
CODE
<div class=”row call-to-action-wrapper”>
<div class=”col-md-7″>
<h2 class=”slogan”><img class=”aligncenter size-full wp-image-56″ src=”http://www.aegisprotectiongroup.com/wp-content/uploads/2016/12/security_centre_w.png” alt=”” width=”350″ height=”350″ /></h2>
</div>
<div class=”col-md-5″>
<div class=”call-to-action”>
<h2 class=”slogan”><span style=”color: #141414;”>WE MAKE IT OUR BUSINESS TO HELP YOUR BUSINESS SUCCEED</span></h2>As you see from the above link and code, I had to use “slogan” just to get it to be on the same level as the text, with out slogan its stuck at the very very top of the page. I have tried googling the “col-md-5” To under stand how to use them, and they are still very confusing columns and rows.
Recap:
- Need to know how to edit the box and the white looking triangle stuck to the box boarder
- Need to know how to edit the in-page separation triangle and color
- need to know how to edit the <HR> style and color and size and whatever else
- Need to know how to place images with out needing to copy text code just to make it fit in the right area
I am new to CSS in general and would like to learn. I was up till 3am trying to figure this out.
If you have any questions for me and need any more info please reply. I really need help with this.
Thank You
- The triangles on the page are not images. They are constructed with CSS. To remove the triangles at the top of the testimonial boxes, you will need to following code to the CSS Editor:
- The topic ‘How do I edit posts or pages in BoldGrid?’ is closed to new replies.
