Change icon and text position in inof outline

  • Hazzo
    Inactive member
  • Topic Author
  • Member
  • Member
More
3 months 3 weeks ago #51524 by Hazzo
Hi Milos,

Where can I change the icon in the info outline class to <i class="fa-thin fa-wine-glass"></i> ?

And is it possible to have the icon presented in front of each line, like in <ul>? Or alternatively is it possible to draw a frame around an unordered list?


Also, where can I change text weight to bold inside an article?

Please Log in to join the conversation.

  • milos
    Support Staff
  • Moderator
  • Moderator
More
3 months 3 weeks ago #51525 by milos
Hello,

To change the info paragraph icon to a wine glass icon, add this to the custom.css file:
Code:
.info:before { content: '\f4e3'; color: #006699; }

You have predefined list styles as it's presented here: demo.hotjoomlatemplates.com/pizzeria/index.php/about/typography

You can change, for example, the icon of the "arrow" list style to a wine glass icon if you add this to the custom.css file:
Code:
ul.arrow li:before { content: '\f4e3'; }

Regards,
Milos

Please Log in to join the conversation.

  • Hazzo
    Inactive member
  • Topic Author
  • Member
  • Member
More
3 months 3 weeks ago #51526 by Hazzo
Thanks,

would it be possible to use my own icon as well? 

Please Log in to join the conversation.

  • milos
    Support Staff
  • Moderator
  • Moderator
More
3 months 3 weeks ago #51527 by milos
You would need to disable icons first, in the custom.css file:
Code:
.info:before { display: none; }

and
Code:
ul.arrow li:before { display: none; }

Then you should assign a background image instead that is pointing to your icon PNG file, for example:
Code:
.info { background: url(../images/icon.png) no-repeat left; }

and
Code:
ul.arrow li { background: url(../images/icon.png) no-repeat left; }

The icon.png should be uploaded to /media/templates/site/pizzeria/images.

Regards,
Milos

Please Log in to join the conversation.

  • Hazzo
    Inactive member
  • Topic Author
  • Member
  • Member
More
3 months 3 weeks ago - 3 months 3 weeks ago #51528 by Hazzo
Worked fine with own icon, but I need to fix the placement.
How would I do to move the glass towards the top (red arrow) and slightly right (green arrow)?

At the same time I would like to move the bullets and text to the right (blue arrow) som that t's left justified but not covered by the glass. 

PROBLEM - the icons for editing articles has disappeared.... Does it have anything to do with this?  EDIT - updated Sparky for J5 and it seems to have fixed the problem.

This message contains confidential information


 

 
Last edit: 3 months 3 weeks ago by Hazzo. Reason: Edit - one problem solved with J5 update

Please Log in to join the conversation.

  • milos
    Support Staff
  • Moderator
  • Moderator
More
3 months 3 weeks ago #51529 by milos
Can't log in. This is the error:

"Din behörighet har avslagits."

Please Log in to join the conversation.

Time to create page: 0.093 seconds
Powered by Kunena Forum