SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75! 
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Styling questions (background image)

4 years 1 month ago #118631 by mlehr
Hai,

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.

4 years 1 month ago #118642 by Nick
Replied by Nick on topic Styling questions (background image)
Hi Maurice,

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.

4 years 1 month ago #118646 by mlehr
Replied by mlehr on topic Styling questions (background image)
Hai Nick,

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.

4 years 1 month ago #118652 by Valentin
Replied by Valentin on topic Styling questions (background image)
Hi Maurice,

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

1. Background image: what would be the best/easiest way to do that?

For custom html modules, go to options tab > Select a Background Image

2. Text over the image. With divs in editor? Better way?

Any content you add to the custom html module, will be added over the image.

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?

With Firebug , check the CSS that makes possible those features as in your screenshot, please

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.

4 years 1 month ago #118653 by Nick
Replied by Nick on topic Styling questions (background image)
Hi Maurice,

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.

4 years 1 month ago #118660 by mlehr
Replied by mlehr on topic Styling questions (background image)
Hai Valentin,

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.

4 years 1 month ago #118661 by mlehr
Replied by mlehr on topic Styling questions (background image)
Hai Nick,

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.

4 years 1 month ago #118664 by Valentin
Replied by Valentin on topic Styling questions (background image)

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?

If I follow you, you only have a mockup design, and you want to convert it into a HTML/CSS.
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.

4 years 1 month ago #118666 by mlehr
Replied by mlehr on topic Styling questions (background image)
That is right.

Links work now :-)

Maurice

Please Log in to join the conversation.

4 years 1 month ago - 4 years 1 month ago #118681 by Valentin
Replied by Valentin on topic Styling questions (background image)
What's the current progress? Share a link if possible

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.

4 years 1 month ago #118695 by mlehr
Replied by mlehr on topic Styling questions (background image)
I use T3 framework.

No link possible yet...

Maurice

Please Log in to join the conversation.

4 years 1 month ago - 4 years 1 month ago #118703 by Valentin
Replied by Valentin on topic Styling questions (background image)
Hi Maurice,

T3 uses bootstrap 3: demo.t3-framework.org/joomla30/index.php/en/
See BS documentation on this page .

3. Little image over part of the textblok and background image. How can I do that?

To create a circle image, worth to read this tutorial: www.ostraining.com/blog/coding/circled-images-css/

4. Red bar. Easiest way?

A div with some CSS.
For example:
.your-div-class {
    color: white;
    background: red;
    padding: 20px;
}

5. Little red arrow pointing downwards. How/where can I create that?

Give a try to this online generator: cssarrowplease.com/

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.

4 years 1 month ago #118705 by mlehr
Replied by mlehr on topic Styling questions (background image)
Thanx Valentin, I'll go ahead and try!

Cheers Maurice

Maurice

Please Log in to join the conversation.

4 years 1 month ago #118706 by Valentin
Replied by Valentin on topic Styling questions (background image)
You're welcome, Maurice!

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.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!