Removing extralight-border from sidebar menus / difficulties with alignment « Support Forum | Kriesi.at

Support Forum » Angular

Removing extralight-border from sidebar menus / difficulties with alignment

7 posts from 3 voices

Started 6 months ago by merhardj
Latest reply from Ismael
This topic is closed
This topic is resolved

Tags:

merhardj
Member

Hi there -

I've been messing with the CSS a bit to try and come up with an elegant solution for my website, and have been running into a few problems.

Namely, I can't find out how to remove the extralight-border for only the sidebar widget box. There are also weird dashes in front of the individual sidebar widget menu items that appear as boxes on mobile devices.

My other problem comes up when trying to style the .ajax-control above the portfolio. I want it to be aligned left with the element above it (the two columns), but given the dynamic nature of the theme, it looks weird on mobile devices and when the resolution changes. I was also curious if it were possible to change the order of the buttons (so the X appears first, sort of like OSX)

Any suggestions would be a great help.

page in question here: http://danmerhar.com/good-artists-borrow-great-artists-steal/

Thanks!

Posted 6 months ago #
Ismael
Moderator
Hi merhardj,

Kindly add this code in your Quick CSS or custom.css:
```
.widget .seperator.extralight-border {
display: none;
}
```
This code removes the extralight-border on the sidebar widget.

Also, add this code in your Quick CSS or custom.css, to remove the line below each list item in the widget:
```
.widget li, .widget a {
border: 0;
}
```
or
```
.widget li, .widget a {
border: 0 !important;
}
```
The other problem, I'm unable to test it with a mobile device. Let me tag the rest of the team.

Regards,
Ismael
Posted 6 months ago #
Nick
Moderator

Hi,

For making customization to your theme's CSS, we recommend that you install and get to know Firebug ( http://getfirebug.com/css ) and Google Chrome developer tools ( https://developers.google.com/chrome-developer-tools/docs/overview ) browser add-on. Firebug is a free web development tool that integrates into Firefox and Chrome browsers and assists in monitoring, debugging and editing of any website's CSS, HTML, DOM, and JavaScript files.

Once installed, this easy to follow video will show you the basics of Firebug – http://vimeo.com/20917974 and get you on your way to customizing your theme like a real pro. It's 5 minutes long, and by the end you will know how to style anything!

Thanks,

Nick

Posted 6 months ago #
merhardj
Member

I've been using Google Chrome's built-in functionality, though it only goes so far in being useful to me as I need to brush up on my CSS. I know the changes I'm asking are quite a bit more complex than simple styling questions. ;]

With this theme in particular, what coding languages would you suggest I look into to get a better grasp of what exactly is happening behind the scenes?

Posted 6 months ago #
Nick
Moderator

Hi,

Have you tried Ismael's customization he suggested above?

Almost all developers today write their CSS code in Firebug. You work with notepad and a browser and as you are adding different styles you save them into notepad to keep them , refresh and keep going on until the design is complete. If you are looking for an automated program , there really is nothing magical but the closest thing that comes is Top Style 4.

For WordPress you would need to know php, jQuery, Ajax, dom, css3, html5 (and xhtml syntax ), sql, as well as functions and constants native to WordPress. Off-course it doesn't mean you have to be able to write anything, you just have to understand what is happening in each particular block or line of code, and to be able to find similar blocks online and swap them out. (even if that is oversimplifying it ). But most of what you see is php files, css files, and jQuery files.

There are tons of awesome free videos on YouTube. Don't bother using the youtube search, instead search through google and put constraints of videos at least 45 minutes long, and search for 'introduction to wordpress development', 'understanding wordpress' or 'wordpress theme customization' 'under the hood of wordpress'. there are some excellent instructional videos by people who can explain what to do in a more interesting and clear way than I ever could.

But open up a php file , when you run into something you don't know, ask the thousands of developers on http://stackexchange.com/ for free, or look it up in http://php.net or http://codex.wordpress.org/ . That's how everybody learns it one step at a time (hate to use that cliche but its true)

Thanks,

Nick

Posted 6 months ago #
merhardj
Member

Thanks for the suggestions. I may download Firefox and Firebug and see if it helps alleviate any of the problems I've been having. I don't hope to be a coding expert by any means, but at least be able to customize a website to my particular needs.

Posted 6 months ago #
Ismael
Moderator

Hi,

I'm sure Firebug can help. :)

Regards,
Ismael

Posted 6 months ago #