-
Posts
-
Hello:
I have several questions about styling:
1.- I’ve created a menu and assigned it to a widget (can be seen in http://paadonline.org/?page_id=35)
Which is the CSS so this menu looks the same as the default sidebar menu as seen in
http://kriesi.at/themedemo/?theme=enfold
2.- About the buttons I want to re style the CSS of them to my style but using shotcodes, it’s that possible, which CSS I have to target?
3.- I’m going to use a typekit font and I want to override the normal and alternate styles of text:
For normal is enough with target: h1, h2, h3, h4, body, p, span?
For alternanate which CSS I have to introduce?
4.- To use the entypo icon font with the unicode for example for the phone that is 📞 I put that on the header but appears an empty box instead of the icon
5.- Last one I didn’t notice until I need them that there is no login and my account areas and links in the header, I’d appreciatte a recomendation on how to implement them.(plugin?)
Many thanks
Jorge
Hi,
1) Do you mean like on this page? http://kriesi.at/themes/enfold/shortcodes/ without the bullet points?
2) The easiest thing to do would be to modify the css of existing buttons and replace them with your css so that you can use the same shortcode. There are many button sizes, The css that styles the buttons is located in /css/shortcodes.css on lines 2459 and in many other places. There are a number of plugins both free and premium that allow easy creation of shortcodes.
3) Which text on which page do you want to change?
4) https://kriesi.at/support/topic/adding-custom-icons This post has examples and link to other examples.
5) http://wordpress.org/plugins/header-login/ Please try this plugin for login.
Thanks,
Nick
Hello Nick,
1.- Yes but it will be more like http://kriesi.at/themes/enfold/shortcodes/animated-image/ where the selected item is highlighted. I want the same format that in your standar sidebar
2.- OK
3.- I resolved it with a plugin, only one point open the css to target the breadcrumb
4.- I don’t want customs icons only the supported icon of enfold entypo. Which is the HTML to write if I want to put a phone “📞” or any other?
5.- OK
Thanks
Jorge
Hi,
1. Please add this to /css/custom.css OR to Quick CSS
.flex_column .widget .widgettitle, .content .widget .widgettitle {
margin-bottom: 1em;
}
#top .widget ul {
list-style-type: none;
list-style-position: outside;
margin-left: 7px;
}2. Here is the css that is used on the blue button on the page you linked to
.avia-button-wrap {
display: inline-block;
}
#top .main_color .avia-color-theme-color {
color: red; /*color of button text*/
}
body .avia-button.avia-color-theme-color, body .avia-button.avia-color-theme-color:hover {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);/*text shadow rgb, 0.1 transparent*/
}
.main_color .avia-color-theme-color{
background-color: #2D5C88; /*main button background color*/
border-color: #2D5C88;/*main button border color*/
}
.avia-button.avia-size-large { /*size, can change large to medium or small*/
padding: 13px 30px;
font-size: 14px;
min-width: 127px;
}
.avia-button.avia-position-left {/*position, can change left to right or center*/
float: left;
display: block;
}
body div .avia-button {
border-radius: 3px;
background-image: url("../images/layout/bg-button.png");
background-repeat: repeat-x;
background-position: 0 0;
padding: 10px;
font-size: 12px;
text-decoration: none;
display: inline-block;
border-style: solid;
border-width: 1px;
margin: 3px 0;
line-height: 1.2em;
position: relative;
font-weight: 600;
text-align: center;
max-width: 100%;
}4) It’s a text font, so you would write it.( ♥ <— heart ) so just copy whatever you need to use by selecting it on a page and copy the glyph itself and paste it as you would paste any letter or word , and then style it with font size and color, etc..
Thanks,
Nick
- The topic ‘Styling several elements, login and my account’ is closed to new replies.