Styling questions (background image)
- mlehr
-
Topic Author
- Offline
- Posts: 510
- Thank you received: 0
Joomla 3 website.
Please see screenshot. Numbers correspond with numbers in printscreen.
I want to create this style in a module.
1. Background image: what would be the best/easiest way to do that?
2. Text over the image. With divs in editor? Better way?
3. Little image over part of the textblok and background image. How can I do that?
4. Red bar. Easiest way?
5. Little red arrow pointing downwards. How/where can I create that?
And how do I get those rounded images like e.g. near number 3?
Regards, Maurice
Maurice
This message has an attachment image.
Please log in or register to see it.
Please Log in to join the conversation.
- Nick
-
- Offline
- Posts: 23621
- Thank you received: 695
We have a template design class, an HTML class, and CSS classes available to you as part of your subscription. Going through those should give you more than enough knowledge to make those types of modifications:
www.ostraining.com/courses/class/joomla/j3-templates
www.ostraining.com/courses/class/coding/html5
www.ostraining.com/courses/categories/css/
Another invaluable tool is Firebug:
www.ostraining.com/courses/session/jooml...introducing-firebug/
www.ostraining.com/courses/session/jooml...diting-with-firebug/
www.ostraining.com/blog/joomla/using-fir...it-joomla-templates/
After hearing all that, what are your thoughts? Would you be interested in taking the classes to learn how to do these types of changes?
Kind regards,
Nick
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please Log in to join the conversation.
- mlehr
-
Topic Author
- Offline
- Posts: 510
- Thank you received: 0
Of course I am famliar with all your classes and I have taken most of them. Not that I know everything :-)
Still I am not sure what would be the best way to style the things I asked for, so I hope you can help me more specific then just general classes. If you point me per question to the specific part of a course, that is fine too.
By the way, if I click on the Firebug links I go to pricing...Can you explain or fix that?
Regards, Maurice
Maurice
Please Log in to join the conversation.
- Valentin
- Offline
- Posts: 9893
- Thank you received: 385
The tutorials Nick suggested are the starting point to know how to build those features from scratch, if that's what you need to know. However replicate all those features in a single module it may requires more time and is beyond the support scope - Support FAQ
For custom html modules, go to options tab > Select a Background Image1. Background image: what would be the best/easiest way to do that?
Any content you add to the custom html module, will be added over the image.2. Text over the image. With divs in editor? Better way?
With Firebug , check the CSS that makes possible those features as in your screenshot, please3. Little image over part of the textblok and background image. How can I do that?
4. Red bar. Easiest way?
5. Little red arrow pointing downwards. How/where can I create that?
Note, the end result may depends on the template you're using. Worth to check the documentation from the developer.
Looking forward to help you
Kind regards,
Valentín
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please Log in to join the conversation.
- Nick
-
- Offline
- Posts: 23621
- Thank you received: 695
As to the Firebug links, please make sure you're logged in before clicking them. If it still occurs when logged in, try clearing your browser cache, then they should work for you.
Kind regards,
Nick
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please Log in to join the conversation.
- mlehr
-
Topic Author
- Offline
- Posts: 510
- Thank you received: 0
3 + 4 + 5; I cannot check that in Firebug because its an image wich a designer made for me. And I trying to integrate that in my website.
Specially for question 3 I would like some help, at least some point in the right direction. Can you do that?
Regards, Maurice
Maurice
Please Log in to join the conversation.
- mlehr
-
Topic Author
- Offline
- Posts: 510
- Thank you received: 0
I was/am logged in and cleared my browser cache many times, but still no success...all I get are prices when I click the Firebug courses...
Regards, Maurice
Maurice
Please Log in to join the conversation.
- Valentin
- Offline
- Posts: 9893
- Thank you received: 385
If I follow you, you only have a mockup design, and you want to convert it into a HTML/CSS.3 + 4 + 5; I cannot check that in Firebug because its an image wich a designer made for me. And I trying to integrate that in my website.
Specially for question 3 I would like some help, at least some point in the right direction. Can you do that?
Am I right?
About the two broken links I detected, try these, please:
www.ostraining.com/courses/session/jooml...introducing-firebug/
www.ostraining.com/courses/session/jooml...diting-with-firebug/
Kind regards,
Valentín
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please Log in to join the conversation.
- mlehr
-
Topic Author
- Offline
- Posts: 510
- Thank you received: 0
Links work now :-)
Maurice
Please Log in to join the conversation.
- Valentin
- Offline
- Posts: 9893
- Thank you received: 385
It's important to know if you are (or you will) use bootstrap or other CSS framework.
Kind regards,
Valentín
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please Log in to join the conversation.
- mlehr
-
Topic Author
- Offline
- Posts: 510
- Thank you received: 0
No link possible yet...
Maurice
Please Log in to join the conversation.
- Valentin
- Offline
- Posts: 9893
- Thank you received: 385
T3 uses bootstrap 3: demo.t3-framework.org/joomla30/index.php/en/
See BS documentation on this page .
To create a circle image, worth to read this tutorial: www.ostraining.com/blog/coding/circled-images-css/3. Little image over part of the textblok and background image. How can I do that?
A div with some CSS.4. Red bar. Easiest way?
For example:
.your-div-class {
color: white;
background: red;
padding: 20px;
}
Give a try to this online generator: cssarrowplease.com/5. Little red arrow pointing downwards. How/where can I create that?
Looking forward to help you
Kind regards,
Valentín
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please Log in to join the conversation.
- mlehr
-
Topic Author
- Offline
- Posts: 510
- Thank you received: 0
Cheers Maurice
Maurice
Please Log in to join the conversation.
- Valentin
- Offline
- Posts: 9893
- Thank you received: 385
Kind regards,
Valentín
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please Log in to join the conversation.