-
AuthorPosts
-
June 21, 2014 at 4:35 pm #281992
Hi,
I apologize for my noobiness, but I am having troubles with my Quick CSS entries. They had been working well for a while, but somehow are now messed up so that some work and some don’t. Specifically, the resizing of the phone number top right of the header and the search icon bottom right of the header, as well as the phone icon button below the contact form. I suspect it has something to do with my curly brackets. Here is my Quick CSS:@media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
max-width: 93%;
height: auto !important;
margin-left: 0px!important;
margin-top: 5px!important;
}@media only screen and (max-width: 767px) {
#advanced_menu_toggle{
display: block;
right: -15px;
top: 40px;
}@media only screen and (max-width: 767px) {
#mobile-advanced {
background-color: rgba(255,255,255,0.95);
}@media only screen and (max-width: 990px) and (min-width: 481px) {
div.grid-content {
display: none!important;
}div.grid-content { pointer-events: none;
}.av_phone_active_right .phone-info {
padding-left: 0px;
font-size: 14px;
}#top .menu-item-search-dropdown > a,
#searchform #searchsubmit, .ajax_search_image, .iconfont {
font-size: 22px;
}@media only screen and (max-width: 990px) {
#socket .sub_menu_socket { display: none;
}span.special_amp:nth-of-type(1) {
margin: 0 -0.02em;
}span.special_amp:nth-of-type(2) {
margin: 0 .01em;
}.av_font_icon.av-icon-style-b}} .av-icon-char:hover {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
b}}-radius: 1000px;
b}}-width: 0px;
b}}-style: none;
padding: 10px;
color: #ffffff;
background: #f7951e;
b}}-color: none;
position: relative;
width: 45px !important;
height: 45px !important;
}.av_font_icon.av-icon-style-b}} .av-icon-char {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
b}}-radius: 1000px;
b}}-width: 0px;
b}}-style: none;
padding: 10px;
color: #ffffff;
background: #96af29;
b}}-color: none;
position: relative;
width: 45px !important;
height: 45px !important;
}@media only screen and (max-width: 990px) {
.avia-tooltip {
display: none !important;
opacity: 0 !important;
}@media only screen and (max-width: 990px) {
.av_font_icon.av-icon-style-b}} .av-icon-char:hover {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
b}}-radius: 1000px;
b}}-width: 0px;
b}}-style: none;
padding: 10px;
color: #ffffff;
background: #f7951e;
b}}-color: none;
position: relative;
width: 45px !important;
height: 45px !important;
}span.av_icon_caption.av-special-font {
color: #c3c3c3;
}2) Could you please tell me how to add a phone icon to the left of the phone number top right of the header?
Thanks,
TrevorJune 21, 2014 at 7:29 pm #282017Hi trevorjohnston!
The ones I see that are incorrect are at the bottom. The last 2 media queries don’t have closing brackets and the radius property names are all broken.
Eg these:
b}}-radius: 1000px; b}}-width: 0px; b}}-style: none;
and then
b}}-color: none;
Best regards,
DevinJune 22, 2014 at 12:51 am #282057Ok. I think I cobbled those ones together from a couple different sources, so I might be best off having you direct me from scratch. All I want to do is show a white font icon (U800) on a 45px wide green circle background (that changes to orange on hover).
Also, could you please tell me how to add the same phone icon (without any background circle) to the left of the phone number top right of the header?
Thanks again.
TrevorJune 22, 2014 at 4:37 pm #282166We aren’t able to debug/re-write code or css for you but in general the css syntax looks like this:
So you have the selector and then the declarations. Each declaration is typically on a new line with the curly brackets enclosing all of them. For media queries, the curly brackets of the media query enclose anything you want to be in that media query.
To add a phone icon you can generate the icon shortcode and then copy out the html for it and add it into the field. Ex:
<span class="av_font_icon avia_animate_when_visible av-icon-style- avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style="color:#ffffff; border-color:#ffffff;"><span class="av-icon-char" style="font-size:20px;line-height:20px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span>
June 22, 2014 at 5:28 pm #282176Thanks very much Devin. I understand and appreciate that you can’t debug or re-write css code. It’s a slow learning process for a rookie like me, but you guys are helping a great deal.
Cheers.June 23, 2014 at 7:03 am #282279Hey!
Glad we are able to help. In case you have any questions, please take some time to review all of the resources in the Theme Documentation as a lot of basic stuff like theme installation, css snippets etc are already available in there with better explanation and awesomeness. Watch some of our Video Tutorials to learn more about the different aspect of the theme. You can also search the forums for queries that has been answered before that might be related to your problem.
If you find that you still have questions after taking the time on our documentations, don’t hesitate to let us know and we will be happy to assist you. If you have any requests or you feel like giving us a warm hug? You can definitely post it on our Feature Requests page. :)
Regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.