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

Change the size and font + move titlle below image

3 years 7 months ago #126083 by artctrldel.info@gmail.com
Change the size and font + move titlle below image was created by artctrldel.info@gmail.com
Hi guys,

I would like to get my blogpost to look like my most popular module. 2 images attached.

I need to change the size of the image and crop from center in it.

Move title below the image.

Change the font.

So they all become the same size and therefor looks much better.

Any suggestion on the best way to do so?

Thanks again

Benjamin

This message has attachments images.
Please log in or register to see it.

Please Log in to join the conversation.

3 years 7 months ago #126105 by Valentin
Hi Benjamin,
Adding custom CSS you can reach the desired result.

We have useful resources to guide you:
Using Firebug to Edit Joomla Templates
CSS classes

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

3 years 7 months ago - 3 years 7 months ago #126121 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic Change the size and font + move titlle below image
Great. :P

I would like to begin with the size of the images.

I open firebug and I'm wondering about the class and selector since I want to target all intro images, not the 1 leading article though? (I have 1 leading article in 1 column and 30 intro articles in 3 columns)
Thanks :)

This is what i get:

.rstboxes .rstbox {
display: none;
font-size: 14px;
line-height: 1.4em;
max-height: 100%;
overflow: auto;
position: fixed;
width: 100%;
z-index: 99999;

and this:

.rstboxes .rstbox .rstbox-close {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
color: #888888;
display: block;
font-family: Tahoma;
font-size: 21px;
height: 33px;
line-height: 0;
margin: 0;
padding: 13px 11px;
position: absolute;
right: 0;
text-decoration: none !important;
top: 0;
width: 33px;
z-index: 100;
}

Benjamin

Please Log in to join the conversation.

3 years 7 months ago #126130 by Nick
Hi Banjamin,

Could we get a link to the page to take a look?

Looking forward to helping.

By the way, our CSS classes would be of big help for making these types of changes:
www.ostraining.com/classes/css/

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

3 years 7 months ago #126133 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic Change the size and font + move titlle below image
Hi Nick,

www.artctrldel.net

Thanks

Please Log in to join the conversation.

3 years 7 months ago #126137 by Nick
Thanks Benjamin.

You should be able to use:
.raxo-related-articles .raxo-columns .raxo-item .raxo-img img

To find this, you can right click on the image then insepect with Firebug. When Firebug opens, in the HTML tab, you can click the different elements and check the CSS on the right side. Based off of that info, you can create your CSS.

Hope this helps! Let us know if you have any questions and we'll be glad to answer.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

3 years 7 months ago #126156 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic Change the size and font + move titlle below image
When I have found the correct size, what would be the proper solution?

Thanks

Benjamin

Please Log in to join the conversation.

3 years 7 months ago #126170 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic Change the size and font + move titlle below image
Hi guys,

I'm having a hard time getting stated with this one.

First I need to find the class and selector.

Are these the correct informations, when I want to change my blogpost?


.rstboxes .rstbox {
display: none;
font-size: 14px;
line-height: 1.4em;
max-height: 100%;
overflow: auto;
position: fixed;
width: 100%;
z-index: 99999;

and this:

.rstboxes .rstbox .rstbox-close {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
color: #888888;
display: block;
font-family: Tahoma;
font-size: 21px;
height: 33px;
line-height: 0;
margin: 0;
padding: 13px 11px;
position: absolute;
right: 0;
text-decoration: none !important;
top: 0;
width: 33px;
z-index: 100;
}

And what would my opening CSS be?

Thanks

Benjamin

Please Log in to join the conversation.

3 years 7 months ago #126178 by Valentin
Hi Benjamin,

The best way to test custom CSS is by adding to your site and see how it goes. Is the code live in your site?

First I need to find the class and selector.

This tutorial will guide you to figure out the selector. Please give a try and let us know if works as you expected.

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

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!