Recent
Categories
View Replies (6)

Changing bullets in lists to an image (like class="star" or "tick")

  1. Issue
0
Votes
Undo
  1. bibbp
    bibbp
  2. Sherlock Holmes
  3. Commercial Templates
  4. Monday, 02 March 2020
  5.  Subscribe via email
Hi Ciaran,

There is a similar post but I can't follow it. I want to replace the small circles in the attached image with the butterflies. These are menu items in a menu in sidecol_2b. The butterflies are currently list images. I suspect actually I should substitute for the circles in some way like the class="star".

Using inspect, if I click on the <ul>...<ul> and look at the element and enter list-style: none; in the section ul ul, ul ol, ol ol, ol ul { ...} it does what I want, but I can't get that into the custom css area correctly.

Also I can't seem to change the text size and colour of the menu items. Can you help please?

Many thanks!

Peter
Attachments (1)
Menu capture.jpg Menu capture.jpg
References
  1. https://www.scottsproject.org.uk/day-services-home
Responses (6)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Peter

Presuming I understand you correctly, to amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.menuds ul {

    list-style: none;

    margin-left: 10px;

}


To amend text size and color you can also add the following (edit to taste)...

.menuds a {

    color: #aaaaaa;

    font-size: 16px;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
bibbp
bibbp
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Unfortunately this did not work...
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Try adding !important to force the CSS....

.menuds ul {

    list-style: none !important;

    margin-left: 10px !important;

}

.menuds a {

    color: #aaaaaa !important;

    font-size: 16px !important;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
bibbp
bibbp
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
still no luck :(
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

The suggested CSS is in your website source however it is not been applied. This is most likely due to a syntax error in your custom CSS field, located before the above CSS. I would suggest either moving the suggested CSS to the top of the custom CSS field or finding and fixing the syntax error. Try pasting the contents of your custom CSS field into http://csslint.net/ to find the error.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
bibbp
bibbp
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Sorted! That is a really useful tool.

Thank you very much Ciaran!
  1. more than a month ago
  2. Commercial Templates
  3. # 6
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!