Hi guys,
Just going through tutorials and getting familiar.
I've tried to add a gradient to the site.
But for some reason it's added the background gradient to each column
As shown here:
http://www.ajhdesigns.com.au/responsive/index.html
I've targeted main.css and changed:
body.grid-1 {
background-image: url(../img/gradient.png) ;
Not to sure if I've target the wrong area, as I just want one gradient floating down the full page so to speak.
Rather than filling it in each column.
Cheers,
-Adam
Adam Hicks
Registered User
167 posts
Adam Hicks
Registered User
167 posts
Ok Stoaked!
I'm slowly starting to get the hang of CSS. They tuts from you guys have been amazing.
- I've now been able to get Wow Slider work and make it responsive.
- Been able to add a gradient background gradient.
- Also been able to add an image to a row.
However my question is - now I can create an image to a row.
What I ultimately want to do is use the rows or columns and style them so the text box have a stylish background.
Is there a way to do this? Do I need to design an exact width and height image for this - if so where on RLM does it give this info. It gives me width, max-width, min-width and min height - do I some how use these...
The below link you can sort of see what I'm trying to do.
However since the rows height isn't big enough it's cutting off the box.
http://www.ajhdesigns.com.au/responsive/index.html
I'm slowly starting to get the hang of CSS. They tuts from you guys have been amazing.
- I've now been able to get Wow Slider work and make it responsive.
- Been able to add a gradient background gradient.
- Also been able to add an image to a row.
However my question is - now I can create an image to a row.
What I ultimately want to do is use the rows or columns and style them so the text box have a stylish background.
Is there a way to do this? Do I need to design an exact width and height image for this - if so where on RLM does it give this info. It gives me width, max-width, min-width and min height - do I some how use these...
The below link you can sort of see what I'm trying to do.
However since the rows height isn't big enough it's cutting off the box.
http://www.ajhdesigns.com.au/responsive/index.html
Adam Hicks
Registered User
167 posts
a good example of this..
On my main site:
http://www.ajhdesigns.com.au/
How could I replicate one of the blue boxes there, which contains text with CSS background code.
Cheers,
-A.
On my main site:
http://www.ajhdesigns.com.au/
How could I replicate one of the blue boxes there, which contains text with CSS background code.
Cheers,
-A.
Eric Rohloff
Senior Advisor
20,271 posts
Hi Adam,
Where is there a box getting cutoff?
Where is there a box getting cutoff?
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
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
Adam Hicks
Registered User
167 posts
Umm you'd see it if your on a desktop. Just notice that the background images on a row arnt acting responsive...
Plot thickens...
Plot thickens...
Eric Rohloff
Senior Advisor
20,271 posts
Check your min width on the image class or id.
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
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
Eric Rohloff
Senior Advisor
20,271 posts
As far as the rounded corners go I thought you could add your own styling to the head of the page through the layout/ Manage Project but it doesn't seem to be working for me.
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
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
Eric Rohloff
Senior Advisor
20,271 posts
Ok I see it only adds the custom header code after export.
There's no built in border radius for rlm at this time
So you can target a class or an ID and add this to the head
of your page through the "Layouts" then "Manage Project".
Adjust as needed.
There's no built in border radius for rlm at this time
So you can target a class or an ID and add this to the head
of your page through the "Layouts" then "Manage Project".
Adjust as needed.
<style>
.border-radius {
border-radius:10px;
}
</style>
.border-radius {
border-radius:10px;
}
</style>
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
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
paintbrush
Ambassador
3,816 posts
Do I need to design an exact width and height image for this...
No, your image will no longer be responsive.
Adam, you can use CSS to create your effect, but not having used RLM, I don't know where you would add that CSS. So...
Eric, is there no way to add that within the actual stylesheet, rather than having to put <style> tags in the head?
Or, is it possible to add a link to an additional stylesheet? I had assumed (
) that since RLM was more for the framework, one would add most of their customizations after export by way of their own stylesheets.Here's an example for your box. I used one I already had and changed the colors to show the <h> and <p> more clearly.
Also, you wouldn't need the top part of the .box CSS, since you'll set that in RLM.
.box {
display:inline-block;
vertical-align:top;
text-align: justify;
min-width: 220px;
---------------------------<ignore above
padding: 0;
margin:0px 1em 15px 1em;
background-color: #800080; <your gradient, etc here
border-color: transparent;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.box p {
text-align: left;
font-family: 'lucida sans unicode', sans-serif;
font-size: 1.2em;
color: #FFFFFF;
margin: 0;
padding: 5px 1em 15px 1em;
}
.box h4 {
font-size:1.6em;
font-family: Georgia, serif;
text-align: center;
color: #FFFFFF;
margin: 0;
padding: 10px 1em 15px 1em;
background-color: #A5C42C; <<<your gradient here
border-color: transparent;
-webkit-border-top-left-radius:7px;
-webkit-border-top-right-radius:7px;
-moz-border-radius:7px 7px 0 0;
border-radius:7px 7px 0 0;
}
display:inline-block;
vertical-align:top;
text-align: justify;
min-width: 220px;
---------------------------<ignore above
padding: 0;
margin:0px 1em 15px 1em;
background-color: #800080; <your gradient, etc here
border-color: transparent;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.box p {
text-align: left;
font-family: 'lucida sans unicode', sans-serif;
font-size: 1.2em;
color: #FFFFFF;
margin: 0;
padding: 5px 1em 15px 1em;
}
.box h4 {
font-size:1.6em;
font-family: Georgia, serif;
text-align: center;
color: #FFFFFF;
margin: 0;
padding: 10px 1em 15px 1em;
background-color: #A5C42C; <<<your gradient here
border-color: transparent;
-webkit-border-top-left-radius:7px;
-webkit-border-top-right-radius:7px;
-moz-border-radius:7px 7px 0 0;
border-radius:7px 7px 0 0;
}
The HTML:
<div class="box">
<h4>Title goes here</h4>
<p>Your text goes here. Blah blah blah <br>
blah, blah blah blah blah...</p>
<p>Another paragraph</p>
</div>
<h4>Title goes here</h4>
<p>Your text goes here. Blah blah blah <br>
blah, blah blah blah blah...</p>
<p>Another paragraph</p>
</div>
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
Eric Rohloff
Senior Advisor
20,271 posts
Yes you can do any way you want. I wish it would apply the style before export so you could test things then apply them to a sheet.
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
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
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.
