sidebar logo icons - Support | Kriesi.at - Premium WordPress Themes

Tagged: inline, sidebar icons

Viewing 30 posts - 1 through 30 (of 62 total)

1 2 3 →

Author

Posts
November 1, 2016 at 12:09 pm #706667

lech07
Participant

Hello,

I have added some icons to my sidebar at http://zorbas.synology.me/wordpress/underholdning/ but I dont think it looks very nice like Kriesis site at http://kriesi.at/themes/enfold/features/

Please assist how to make it look nice (in same line, height etc.) and with box/shadow.
I want it to look like the sidebar here: http://kriesi.at/themes/enfold/features/

November 2, 2016 at 4:08 pm #707193

Yigit
Keymaster

Hey!

We are using Tabs element on Features page on our demo site. Examples can be seen here – http://kriesi.at/themes/enfold/shortcodes/tabs/ :)

Best regards,
Yigit

November 8, 2016 at 5:50 pm #709911

lech07
Participant

Hi Yigit,

Tabs look more nice but can I use it as a normal menu somehow?

Is it possible to make the sidebar look as nice as the tabs with logo?
As you can see right now it doesn´t look very nice the sidebar menu. Can you please assist to make it nice with shadow, correct line/height like tabs menu etc.?

November 10, 2016 at 9:01 am #710579
Nikko
Inactive Moderator
Hi,

This will not exactly make it look like the ones in the features section, but it should look close to it, try to add this code to Quick CSS (located in Enfold > General Styling):
```
#menu-sidebar-underholdning li a {
    background: #ffffff;
    background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 97%, #f1f1f1 100%);
    background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 97%,#f1f1f1 100%);
    background: linear-gradient(to right, #ffffff 0%,#ffffff 97%,#f1f1f1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=1 );
    border: 1px solid #e1e1e1;
    margin: 0 0 -1px;
    padding: 12px 16px !important;
    text-align: left;
}
```
Hope this helps :)

Best regards,
Nikko
November 10, 2016 at 9:07 am #710582
Ismael
Moderator
Hi!

Please decrease the font size of the icons from 20 to 13 or 15px, it is the font size of the menu items. Add this css code to create a shadow effect.
```
.sidebar_left {
    -moz-box-shadow: inset -8px 0 20px -10px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset -8px 0 20px -10px rgba(0, 0, 0, 0.2);
    box-shadow: inset -8px 0 20px -10px rgba(0, 0, 0, 0.2);
}
```
Best regards,
Ismael
November 10, 2016 at 9:00 pm #710890

lech07
Participant

thanks alot.
Seems great but how can i have the menu names/icons straight? Like in Nikkos code.

November 11, 2016 at 11:05 am #711061
Nikko
Inactive Moderator
Hi,

Try adding this code in Quick CSS:
```
.sidebar_left .inner_sidebar {
    margin-right: 0;
}

#menu-sidebar-underholdning li a {
    border: 1px solid #e1e1e1;
    border-right: 0;
    border-left: 0;
    margin: 0 0 -1px;
    padding: 12px 16px !important;
    text-align: left;
}

#menu-sidebar-underholdning li:first-child a {
    border-top: 0;
}
```
Let us know if it’s good or still need any modification. :)

Best regards,
Nikko
November 11, 2016 at 5:11 pm #711266

lech07
Participant

Thanks, but would it be possible to make the code so it works if i make another sidebar?
So let´s say i create in the future another sidebar, then i want it to have same settings.

When I click on “Pakketilbud” on the sidebar it brakes because I have subpages under “Pakketilbud”

So it would be nice to fix this and to make the css in a way that all sidebars in the future will have this setting.

Do you know if all this quick css will slow down the site? And how much will it slow the site down?

November 12, 2016 at 9:44 am #711421
Nikko
Inactive Moderator
Hi!

I don’t think css we add on Quick CSS will actually make the site slowdown since it’s just a few several bytes. Try to replace this code above:
```
#menu-sidebar-underholdning li a {
    border: 1px solid #e1e1e1;
    border-right: 0;
    border-left: 0;
    margin: 0 0 -1px;
    padding: 12px 16px !important;
    text-align: left;
}

#menu-sidebar-underholdning li:first-child a {
    border-top: 0;
}
```
To this one (this should work on other left sidebars):
```
.sidebar_left .menu li a {
    border: 1px solid #e1e1e1;
    border-right: 0;
    border-left: 0;
    margin: 0 0 -1px;
    padding: 12px 16px !important;
    text-align: left;
}

.sidebar_left .menu li:first-child a {
    border-top: 0;
}
```
Hope this helps :)

Regards,
Nikko
- This reply was modified 8 years, 1 month ago by Nikko.
November 12, 2016 at 3:58 pm #711448
lech07
Participant
Now the shadows are gone. I want it with shadows nad want it to look like the tabs.

my code looks like this:
.custom-tag { padding: 5px; background-color: rgba(0,0,0,0.5); }
@media only screen and (max-width: 767px) { .progressbar-title {
font-size: 11px;
}}
@media only screen and (max-width: 767px) { .av-catalogue-content p:last-child {
font-size: 11px;
}
.avia_message_box_content {
margin-left: -8px;
margin-right: -8px;
}}

.sidebar_left .inner_sidebar {
margin-right: 0;
}

.sidebar_left .menu li a {
border: 1px solid #e1e1e1;
border-right: 0;
border-left: 0;
margin: 0 0 -1px;
padding: 12px 16px !important;
text-align: left;
}

#.sidebar_left .menu li:first-child a {
border-top: 0;
}

And the subpages/subbuttons looks wrong . (see screenshot)

View post on imgur.com
- This reply was modified 8 years, 1 month ago by lech07.
November 13, 2016 at 12:08 am #711501
Nikko
Inactive Moderator
Hey!

Sorry, I made a mistake on my code, please change this:
```
#.sidebar_left .menu li:first-child a {
  border-top: 0;
}
```
To this one:
```
.sidebar_left .menu li:first-child a {
  border-top: 0;
}
```
Regards,
Nikko
November 15, 2016 at 7:15 pm #712567

lech07
Participant

It is still not showing the subbuttons correct (pakketilbud1, pakketilbud2 and pakketilbud3)

My full quick css code is:
.custom-tag { padding: 5px; background-color: rgba(0,0,0,0.5); }
@media only screen and (max-width: 767px) { .progressbar-title {
font-size: 11px;
}}
@media only screen and (max-width: 767px) { .av-catalogue-content p:last-child {
font-size: 11px;
}
.avia_message_box_content {
margin-left: -8px;
margin-right: -8px;
}}

.sidebar_left .inner_sidebar {
margin-right: 0;
}

.sidebar_left .menu li a {
border: 1px solid #e1e1e1;
border-right: 0;
border-left: 0;
margin: 0 0 -1px;
padding: 12px 16px !important;
text-align: left;
}

.sidebar_left .menu li:first-child a {
border-top: 0;
}

November 16, 2016 at 7:42 am #712790
Nikko
Inactive Moderator
Hi!

I think you forgot to include Ismael’s code:
```
.sidebar_left {
    -moz-box-shadow: inset -8px 0 20px -10px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset -8px 0 20px -10px rgba(0, 0, 0, 0.2);
    box-shadow: inset -8px 0 20px -10px rgba(0, 0, 0, 0.2);
}
```
If there’s anything needed to be changed please let us know and post a screenshot.

Regards,
Nikko
November 16, 2016 at 4:34 pm #713011

lech07
Participant

Hello,

it is getting a little but confusing. I was not aware that I needed Ismaels code and your code at the same time.
Can you please write the whole code to insert so that´s no confusion please?

My code looks like this now, and it still brakes the subbuttons:
.sidebar_left {
-moz-box-shadow: inset -8px 0 20px -10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset -8px 0 20px -10px rgba(0, 0, 0, 0.2);
box-shadow: inset -8px 0 20px -10px rgba(0, 0, 0, 0.2);

}
.sidebar_left .inner_sidebar {
margin-right: 0;
}

.sidebar_left .menu li a {
border: 1px solid #e1e1e1;
border-right: 0;
border-left: 0;
margin: 0 0 -1px;
padding: 12px 16px !important;
text-align: left;
}

.sidebar_left .menu li:first-child a {
border-top: 0;
}

November 17, 2016 at 7:35 am #713407
Nikko
Inactive Moderator
Hi!

Sorry for the confusion, the last time I checked your site, Ismael’s code was still there, that’s why I didn’t give any instruction to remove, but checking on your code now, that should be all that’s needed, but for some reason the 2nd block of code which is this one:
```
.sidebar_left .inner_sidebar {
margin-right: 0;
}
```
doesn’t seem to reflect on the frontend. Can you try to replace it with this code:
```
.sidebar_left .inner_sidebar {
    margin-right: 0 !important;
}
```
If it’s still not working, kindly give us temporary admin access and place it in the “private content” section so only moderators can see.

Regards,
Nikko
November 17, 2016 at 3:08 pm #713606

lech07
Participant

Yes it´s still not working.

November 21, 2016 at 12:08 pm #714768
Nikko
Inactive Moderator
Hi!

The login details you gave doesn’t work, please check. I think the reason it’s not working because on top of the code I gave you, this css code has an extra }
```
@media only screen and (max-width: 767px) { .av-catalogue-content p:last-child {
font-size: 11px;
}
.avia_message_box_content {
margin-left: -8px;
margin-right: -8px;
}}

}
```
Please try to remove that extra closing brace.

Best regards,
Nikko
November 21, 2016 at 12:21 pm #714773

lech07
Participant

Hi,

I created a new password and tested that I could login see below in private content. The name might have been wrong. Now it should be correct.

November 21, 2016 at 1:15 pm #714789

Nikko
Inactive Moderator

Hey!

I have cleaned up your Quick CSS and add some indentions so it’s easier to read and debug. It should work properly now. Let us know if it’s good on your end too. :)

Best regards,
Nikko

November 23, 2016 at 1:27 pm #715895

lech07
Participant

Thanks, but it´s still the same issue.
See here:

View post on imgur.com

November 23, 2016 at 1:48 pm #715918

Nikko
Inactive Moderator

Hey!

Can you give us a link to the page in the screenshot? I checked the link you gave before and it’s working just fine (see private content)

Cheers!
Nikko

November 23, 2016 at 4:11 pm #716019

lech07
Participant

yes but as I tried to explain before it´s not working in the subpage pakketilbud

November 24, 2016 at 2:50 pm #716431

lech07
Participant

Hi Nikko,

Let me know when the changes are done, then I will check.

Thanks.

November 26, 2016 at 12:39 pm #717201
Nikko
Inactive Moderator
Hey!

Thanks for providing the link. I have replaced this code:
```
.sidebar_left .menu li a {
  border: 1px solid #e1e1e1;
  border-right: 0;
  border-left: 0;
  margin: 0 0 -1px;
  padding: 12px 16px !important;
  text-align: left;
}

.sidebar_left .menu li:first-child a {
  border-top: 0;
}
```
to this one:
```
.sidebar_left .widget_nav_menu ul li a {
  border: 1px solid #e1e1e1;
  border-right: 0;
  border-left: 0;
  margin: 0 0 -1px;
  padding: 12px 16px !important;
  text-align: left;
}

.sidebar_left .widget_nav_menu ul li:first-child a {
  border-top: 0;
}
```
This should be good now. Let us know your feedback :)

Best regards,
Nikko
November 27, 2016 at 3:39 pm #717437

lech07
Participant

Hi Nikko,

It´s not possible to get the subsides/subuttons under instead?
Usually the subbuttons are under the normal buttons if im not mistaken.

So, pakketilbud 1, pakketilbud 2 and pakketilbud 3 should be under “Pakktilbud”

How is the page build up normally if i make a button with 1 or 2 subbuttons?

November 27, 2016 at 6:28 pm #717454
Nikko
Inactive Moderator
Hi!

I’m not sure I understand properly, but do you want to remove the space in between the two sidebar menus? if yes, try adding this code to Quick CSS:
```
#top .widget_nav_menu, #top .widget_nav_menu ul {
    padding: 0 !important;
}
```
Regards,
Nikko
December 7, 2016 at 6:35 pm #721645

lech07
Participant

no i wanted to change the order so that it make more sense.

so pakketilbud 1,2 and 3 should appear under “pakketilbud”

so the order is

1. pakketilbud
2. pakketilbud 1
3. pakketilbud 2
4. pakketilbud 3

But im maybe thinking of going with the more simple solution like here: http://www.zorbas.dk/pakketilbud-1

December 7, 2016 at 10:09 pm #721729

Nikko
Inactive Moderator

Hi,

Okay, the only thing I noticed that the sidebar links is separate and not just 1, that’s why it’s appearing that way. Please create a new thread for the latest request.

Cheers!
Nikko

December 12, 2016 at 11:38 pm #723445

lech07
Participant

Hi Nikko,

I am thinking it´s more easy to remove this sidebar http://imgur.com/a/GdN2k
but only from http://zorbas.synology.me/wordpress/pakketilbud/

how can I do this?

I want to keep it on the other pages.

To make it more clear I want it to be like: http://www.zorbas.dk/pakketilbud-1

thanks.

December 13, 2016 at 12:04 am #723455
Nikko
Inactive Moderator
Hey!

Kindly add this code in Quick CSS:
```
.page-id-3650 .sidebar_left #nav_menu-4 {
    display: none;
}
```
Hope this helps.

Regards,
Nikko
Author

Posts

Viewing 30 posts - 1 through 30 (of 62 total)

1 2 3 →

You must be logged in to reply to this topic.