How do you change the side menu icons? Or what is the file path? I tried to inspect element in firefox but does not provide adequate information. See attached
We build. You grow.
Get best community software hereStart a social network, a fan-site, an education project with oxwall - free opensource community software
V1.8 Side menu icon change | Forum
Ebenezer from Bluetide Webs
Nov 1 '15
To replace icons: /ow_themes/THEME_NAME/images after replacing icons you would need to clear your website cache.
tammy harris
Nov 1 '15
.ow_main_menu .iclassifieds_menutext_value {
background: url("/ow_userfiles/themes/main_myfile.png")no-repeat 10px center; }
change the iclassifieds the the page menu its for and the url to the icon you want to use
Leader Darryl B
Nov 1 '15
The Venus Plus theme isn't as easy as most. They use a simple line icon file, and from looking at the base css, they style each image to the menu item. There is no image link; just a content tag that points to the particular icon. I found where they may have got the style sheet. This has the same icons that they used.
https://www.behance.net/...8Free-PSD-Webfont%29
Here is an example of where they styled the icon for the Dashboard
html body div .ow_ic_dashboard:before{
content:"\e06c";
padding-right:5px;
padding-left:5px;
font-size:16px;
font-family:'Simple-Line-Icons';
speak:none;
font-style:normal;
font-weight:bold;
font-variant:normal;
text-transform:none;
line-height:1;
-webkit-font-smoothing:antialiased; }
I haven't got it all figured out. It may be that they have one of these for each menu item that references an icon from the file. You can see several like this in the Base CSS file.
https://www.behance.net/...8Free-PSD-Webfont%29
Here is an example of where they styled the icon for the Dashboard
html body div .ow_ic_dashboard:before{
content:"\e06c";
padding-right:5px;
padding-left:5px;
font-size:16px;
font-family:'Simple-Line-Icons';
speak:none;
font-style:normal;
font-weight:bold;
font-variant:normal;
text-transform:none;
line-height:1;
-webkit-font-smoothing:antialiased; }
I haven't got it all figured out. It may be that they have one of these for each menu item that references an icon from the file. You can see several like this in the Base CSS file.
Leader Darryl B
Nov 1 '15
I think I got it. This was targeting one of my base pages. I uploaded a 20px x 20px image, and paste the url in. It worked. You'll have to have a line for each base page. When you look at the li that make up the menu you will see them. The ones with the generic icon have numbers, like below, instead of a page name, like "Dashboard". This will work for custom icons, so they won't follow the color of the other menu items.
.base_page_86233063 a::before {
content: url("your image url") !important;
}
.base_page_86233063 a::before {
content: url("your image url") !important;
}
The Forum post is edited by Darryl B Nov 1 '15
Team
Leader Darryl B
Nov 2 '15
I found a work around. There are several plugins that have icons assigned in the base css for the Venus Plus. I used the content assignment for plugins I don't have just to get rid of some of the planes. It worked great. I'm sure that the string equals the image much like transforming :) into a smiley face.
Leader Darryl B
Nov 3 '15
Here's a list of simple line icons with unicode. I tried four of them, and they all work. All you need to do is find you base pages in the menu li using inspect element. For example, here are mine. They are the ones that just show a number instead of a page name. These will be the ones that just show the paper plane menu icon in the Venus Plus theme.
li class="base_page_86233063">
li class="base_page_86233063">
<li class="base_page_77472630">
<li class="base_page_77023605">
<li class="base_page_42558969">
<li class="base_page_67441278">
<li class="base_page_62215262">
<li class="base_page_67767487">
Add a line like this to your custom css for each of your base pages. The \e000 I added is the unicode for user-female that you will see as the first one in the attached unicode list. This is just an example of how it should look. The icon fonts work, and follow the colors of your menu.
.base_page_86233063 a::before {
content: "\e000" !important;
}
I've also attached a screenshot of the menu showing that it follows the menu colors, and hover effect.
The Forum post is edited by Darryl B Dec 16 '15
