Colored boxes in articles

Activello
1

Hey there,

I’ve searched for a solution here but didn’t find anything related to my request.

I would like to highlight paragraphs in my blog articles. I’ve added an example below to show what I mean. It’s a kind of colored box around a text section. How can I do that?

Thanks in advance for your help.
GibsonLG

2

Hi @gibsonlg,

I hope you are well today and thank you for your question.

To achieve this add the paragraph that you want to highlight in between following tags as shown in the attached screenshot.

<div class=“highlight-paragraph”>

</div>

Then add the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

.highlight-paragraph {
background-color: #FBEAF0;
padding: 20px;
}

Best Regards,
Movin

3

Hello Movin,

that works out fine, thanks a lot!

I have another request, but I will open a new topic for this if I don’t find the solution in the forum.

Greetings
GibsonLG

4

You are most welcome here :slight_smile:

5

Hey Movin,

I just realised that the highlight paragraphs don’t seem to work on mobile phones. Mobile phones don’t show the background colour, so there is just a white space (cause the font colour is white in the highlight boxes). There seem to be a connection to the responsive behaviour of the theme. Cause if I decrease the window width at the computer browser the background colours disappear at some point.

Is there any way to fix that? Would be very important for me, cause I want to go live within the next days.

Thanks in advance!
GibsonLG

6

Could you please share me the page URL from your site where it is not displaying correctly on mobile phones so that i can troubleshoot it?

7

Hey Movin,

the site is not online yet. I can give you the URL but it’s only online while I am working on it. So please don’t be puzzled if it’s not available at a certain time.

At this blogpost it is highly obvious, cause I set the statements of the people into the highlight paragraphs in pink and green: http://www.karolinemohren.de/digital-detox-tipps-meiner-lieblingsblogger/

You can also see it in the right sidebar (which switches to the bottom of the page in the mobile view) where I have a form to subscribe the newsletter that has a pink background.

Thanks for your help.
GibsonLG

8

I tried to visit your shared site but got the following message.

Die von Ihnen gewünschte Seite ist temporär nicht erreichbar.
Bitte versuchen Sie es zu einem späteren Zeitpunkt noch einmal.
This site is temporarily unavailable.
Please try again later.

It would be better if you make your site accessible until we fix the issue.

9

It is online now until around 6 p.m. CET

Greets
GibsonLG

10

I tested it another time. It has to do with the responsive behaviour of the theme concerning a smaller window width than 1000px. It seems that other parts of the custom CSS code doesn’t work either then. I think it has something to do with that part of my custom CSS:

`@media (min-width: 992px) {
.main-content-inner.col-sm-12.col-md-8 {
width: 65%;
float: left;}

div#secondary {
width: 25%;
font-size: 14px;
float: right;}

I used it to have more space between the content area and the sidebar.

11

I solved it myself, I guess. I really depends on the custom CSS code, I’ve posted. I forgot one bracket.

Thanks for your effort anyway! Great to have such support.

GibsonLG

12

Awesome great to see you got that solved.

Please advise if you have more questions.

Have a fantastic day!