Formatting text in an html element

User 188640 Photo


Registered User
895 posts

Hey, Eric, Inger, Wayan and Frank,

This may be a little long.

I have a website for a restaurant that has a line of text in an html element with a script that changes the amount of years they have been in business every year on their anniversary.

I'm in the process of rebuilding the site and the client wants the text in a certain color and certain size.

I tried using css files for each breakpoint but the first breakpoint just won't show (phone), every other breakpoint works fine. It's like the small breakpoint doesn't exist.

I'm going to attach my css file and maybe someone can see if I have something incorrect in the first breakpoint.

The break points are labeled from smallest to largest as .html-element.html-elemen-bp1 to .html-element.html-elemen-bp5.

I would like to use the script so I don't have to update the year, every year.

Thanks for any help,
Ernie
A Rose is Just a Weed in a Corn Patch!
User 122279 Photo


Senior Advisor
14,088 posts
Online Now

I think you forgot to attach that CSS file.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 188640 Photo


Registered User
895 posts

Inger,
Yes I did.
Attachments:
A Rose is Just a Weed in a Corn Patch!
User 2699991 Photo


Registered User
4,200 posts
Online Now

Ernie Hodge wrote:
Hey, Eric, Inger, Wayan and Frank,

This may be a little long.

I have a website for a restaurant that has a line of text in an html element with a script that changes the amount of years they have been in business every year on their anniversary.

I'm in the process of rebuilding the site and the client wants the text in a certain color and certain size.

I tried using css files for each breakpoint but the first breakpoint just won't show (phone), every other breakpoint works fine. It's like the small breakpoint doesn't exist.

I'm going to attach my css file and maybe someone can see if I have something incorrect in the first breakpoint.

The break points are labeled from smallest to largest as .html-element.html-elemen-bp1 to .html-element.html-elemen-bp5.

I would like to use the script so I don't have to update the year, every year.

Thanks for any help,
Ernie

You need to send the HTMLCode layout too
personally, I can't see why you have labelled the breakpoints between 1 -5 surely the code should be the same for the class name at each breakpoint

IE
.html-element.html-element-bp1

the breakpoints then obey the visibility you have set according to the width and apply it to the element
Here is my secure email details form
https://rsd-tutorialscom.coffeecup.com/ … tutorials/
User 187934 Photo


Senior Advisor
19,941 posts

Are you using Site Designer? If so use an element within SD and add the script to the elements Content code area. This way you can set the styling with the element.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 379556 Photo


Registered User
1,331 posts

I believe that Site Designer is being used. If so, a possible simple solution would be as follows.

1. Remove the CSS mentioned and the present script for the date.
2. Give the text element a class "anniv" and style it however wanted.
3. Put the following script in the footer changing
(a) the date in the 'var s' line to the anniversary date (NB Jan is 0, Dec is 11);
(b) the text as wanted in the 'a.innerHTML' line.

<script>
function years() {
var a = document.querySelector(".anniv");
var s = new Date(2018, 04, 21); // start date as yyyy, mm-1, dd
var t = new Date(); // today
var n = t.getFullYear() - s.getFullYear();
// Reduce number of years by 1 if today is before the anniversary
if(t.getMonth() < s.getMonth()) {n--;}
if(t.getMonth() == s.getMonth() && t.getDate() < s.getDate()) {n--;}
a.innerHTML = "In business for " + n + " years.";
}
window.onload = years;
</script>


Others, of course, may have easier and better solutions or shorter JavaScript, perhaps just 1 or 2 lines.

If multiple pages are to have that text element, I would create in Resources a file called years.js and
(i) put the coding in it without the <script></script> tags
(ii) in the Page Manager > Custom Code Settings > Head box tick 'Use global' and click on 'Add a local CSS or Javascript' to choose the years.js file.

Frank
User 2699991 Photo


Registered User
4,200 posts
Online Now

Ernie
here is some CSS that should help with your problem

<style>
.words{
font-size: 16px;
color: #345c3a;
font-weight: 600;
text-align: center;
}
@media screen and (min-width: 40rem) {
.words {
font-size: 17px!important;
}
}
@media screen and (min-width: 52rem) {
.words {
font-size: 20px!important;
}
}

@media screen and (min-width: 64rem) {
.words {
font-size: 22px!important;
}
}

</style>

You can place it in the header section of the HTML element.
Note,
I have given a new class name to the HTML element also (replace the existing ones)
you can add as many keyframes as you with, (keyframes can be different to your existing breakpoints, no need to add extra breakpoints)
HOWEVER, the keyframes HAVE to be in ASCENDING order (lowest to highest).

Franks solution looks ok too and can be styled within SD direct, (but of course needs breakpoints rather than doing it with custom CSS
Here is my secure email details form
https://rsd-tutorialscom.coffeecup.com/ … tutorials/
User 2699991 Photo


Registered User
4,200 posts
Online Now

Wayan Jaya wrote:
Ernie
here is some CSS that should help with your problem

<style>
.words{
font-size: 16px;
color: #345c3a;
font-weight: 600;
text-align: center;
}
@media screen and (min-width: 40rem) {
.words {
font-size: 17px!important;
}
}
@media screen and (min-width: 52rem) {
.words {
font-size: 20px!important;
}
}

@media screen and (min-width: 64rem) {
.words {
font-size: 22px!important;
}
}

</style>

You can place it in the header section of the HTML element.
Note,
I have given a new class name to the HTML element also (replace the existing ones)
you can add as many keyframes as you with, (keyframes can be different to your existing breakpoints, no need to add extra breakpoints)
HOWEVER, the keyframes HAVE to be in ASCENDING order (lowest to highest).

Franks solution looks ok too and can be styled within SD direct, (but of course needs breakpoints rather than doing it with custom CSS


If you use Franks solution, then you can adjust the text size/colour alignment in the "typography" section of the "Design" tab for the CONTAINER "anniv" (all except for the font type, that would have to be declared with some custom css
Here is my secure email details form
https://rsd-tutorialscom.coffeecup.com/ … tutorials/
User 188640 Photo


Registered User
895 posts

Thanks to everyone.
Eric,
I was in the SD Forum and then came in here to post the question and just forgot to add: SD, using a container div with an HTML element in the container. That would have made my question a lot clearer. If I remember correctly you helped me with the script to do the yearly number of years change. Thanks again.
Frank,
Thank you for your solution as well. It's only on one page thanks for including a multi-page solution as well.
Wayan,
Thank you for your solution and input.

I'll figure out which works the best for this project and let you know what I went with.

Ernie
A Rose is Just a Weed in a Corn Patch!
User 122279 Photo


Senior Advisor
14,088 posts
Online Now

I think the solution provided by Frank really is the easiest. In the script, at the bottom where it says
"In business for " + n + " years.";
you change the sentence to say what the site owner wants, and then on the actual page you create an empty div container with the class name '.anniv' where you want it to appear. The class can be styled, like Wayan says, whichever way you like.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.