hej Nikko,

I want to do the same changes in http://zorbas.synology.me/zorbas.dk/pakketilbud/
I have tried with same method like:
}

.page-id-3647 .sidebar_left #nav_menu-4 {
display: none;
}

and changed ofcourse the page id and nav_menu-2, but it doesnt work for me.
How can i change the quick css so that it works with http://zorbas.synology.me/zorbas.dk ?

the quick css from the old site is:
#top .flag-dansk {
background: url(‘http://zorbas.synology.me/wordpress/wp-content/uploads/2016/12/dansk-flag.png’) center center no-repeat !important;
height: 18px;
width: 50px;
text-indent: -9999em;
}

#top .flag-svensk {
background: url(‘//zorbas.synology.me/wordpress/wp-content/uploads/2016/12/svensk-flag.png’) center center no-repeat !important;
height: 18px;
width: 50px;
text-indent: -9999em;
}

#top .flag-dansk a,
#top .flag-svensk a {
display: block;
}

.custom-tag {
padding: 5px;
background-color: rgba(0,0,0,0.5);
}

#top .widget_nav_menu {
padding-top: 0;
}

.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 !important;
}

.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;
}

.page-id-3665 #element_avia_17_1 {
width: 100%;
margin-left: 0;
}

.av-catalogue-content {
padding-right: 0px;
}
.avia-testimonial-image {
float: none;
margin: 0 auto 0px auto;
}
.avia-testimonial-meta {
margin-left: 0;
text-align: center;
}

.lch-progrees-bar {
padding-right: 0px;
margin-right: -0px;
}

.page-id-3647 .sidebar_left #nav_menu-4 {
display: none;
}

.page-id-3650 .sidebar_left #nav_menu-4 {
display: none;
}

.page-id-3653 .sidebar_left #nav_menu-4 {
display: none;
}

.page-id-3656 .sidebar_left #nav_menu-4 {
display: none;
}

/*
@media only screen and (max-width: 767px) {
.responsive .avia-grid-testimonials .avia-testimonial-meta {
margin-left: 130px;
}}*/

@media only screen and (max-width: 989px) and (min-width: 768px) {
.lch-progress-bar {
padding-right: 0px;
margin-right: 50px;
}
}

@media only screen and (min-width: 768px) {
.home #av_section_2 .entry-content-wrapper {
display: -webkit-flex;
display: flex;
flex-direction: row;
}

.home #av_section_2 .entry-content-wrapper .iconbox,
.home #av_section_2 .entry-content-wrapper .iconbox_content {
height: 100%;
}

.home #av_section_2 .entry-content-wrapper .iconbox_content {
padding-bottom: 0;
}
}

.home #av_section_2 .entry-content-wrapper .iconbox_content {
padding-bottom: 30px!important;
}

.home #av_section_2 .entry-content-wrapper .iconbox_content .avia-button-center {
position: absolute;
bottom: 0;
transform: translateX(-50%);
left: 50%;
width:90%;
}

@media only screen and (max-width: 767px) {
.av-catalogue-price {
font-size: 14px;
position: relative;
}
.av-catalogue-title {
font-size: 14px;
line-height: 1.5em;
}

.avia_textblock {
line-height: 37px;
}

h1 {
line-height: 60px;
}

.fb-page.fb_iframe_widget,
.fb-page.fb_iframe_widget span {
position: static !important;
width: 100% !important;
}

.av-catalogue-content p:last-child {
font-size: 11px;
}

.av-catalogue-image {
float: none;
margin-left: auto;
margin-right: auto;
display: block;
}

.responsive .tabcontainer .tab_content {
padding: 0 5px;
}

.av-catalogue-content p {
font-size: 10px !important;
}

.progressbar-title {
font-size: 11px;
}

.avia_message_box_content {
margin-left: -8px;
margin-right: -8px;
}
}

ok so i should remove that specific css code or should i just try to upload a smaller image? I tried to upload a smal image but it looks awful.

I cant find exactly that code in my css, only some of it. my ccs looks like this:

#top .flag-dansk {
background: url(‘http://zorbas.synology.me/wordpress/wp-content/uploads/2016/12/dansk-flag.png’) center center no-repeat !important;
height: 18px;
width: 50px;
text-indent: -9999em;
}

#top .flag-svensk {
background: url(‘//zorbas.synology.me/wordpress/wp-content/uploads/2016/12/svensk-flag.png’) center center no-repeat !important;
height: 18px;
width: 50px;
text-indent: -9999em;
}

#top .flag-dansk a,
#top .flag-svensk a {
display: block;
}

.custom-tag {
padding: 5px;
background-color: rgba(0,0,0,0.5);
}

#top .widget_nav_menu {
padding-top: 0;
}

.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 !important;
}

.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;
}

@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;
}
.av-catalogue-image {
float: none;
margin-left: auto;
margin-right: auto;
display: block;
}

.responsive .tabcontainer .tab_content {
padding: 0 5px;
}

.av-catalogue-content p {
font-size: 10px !important;
}
}
.avia_message_box_content {
margin-left: -8px;
margin-right: -8px;
}
}
.page-id-3665 #element_avia_17_1 {
width: 100%;
margin-left: 0;
}
.av-catalogue-content {
padding-right: 0px;
}
.avia-testimonial-image {
float: none;
margin: 0 auto 0px auto;
}
.avia-testimonial-meta {
margin-left: 0;
text-align: center;
}
/*
.avia-testimonial-meta {
left: -25px;
}*/
.lch-progrees-bar {
padding-right: 0px;
margin-right: -0px;
}
@media only screen and (max-width: 989px) and (min-width: 768px) {
.lch-progress-bar {
padding-right: 0px;
margin-right: 50px;
}}
@media only screen and (max-width: 767px) {
.avia_textblock {
line-height: 37px;
}

h1 {
line-height: 60px;
}

.fb-page.fb_iframe_widget,
.fb-page.fb_iframe_widget span {
position: static !important;
width: 100% !important;
}

iframe {
width: 100% !important;
}
}
.page-id-3647 .sidebar_left #nav_menu-4{
display: none;
}
.page-id-3650 .sidebar_left #nav_menu-4
{
display: none;
}
.page-id-3653 .sidebar_left #nav_menu-4{
display: none;
}
.page-id-3656 .sidebar_left #nav_menu-4 {
display: none;
}

/*
@media only screen and (max-width: 767px) {
.responsive .avia-grid-testimonials .avia-testimonial-meta {
margin-left: 130px;
}}*/

@media only screen and (min-width: 768px) {
.home #av_section_2 .entry-content-wrapper {
display: -webkit-flex;
display: flex;
flex-direction: row;
}

.home #av_section_2 .entry-content-wrapper .iconbox,
.home #av_section_2 .entry-content-wrapper .iconbox_content {
height: 100%;
}

.home #av_section_2 .entry-content-wrapper .iconbox_content {
padding-bottom: 0;
}
}
.home #av_section_2 .entry-content-wrapper .iconbox_content {
padding-bottom: 30px!important;
}
.home #av_section_2 .entry-content-wrapper .iconbox_content .avia-button-center {
position: absolute;
bottom: 0;
transform: translateX(-50%);
left: 50%;
width:90%;
}
@media only screen and (max-width: 767px) {
.av-catalogue-price {
font-size: 11px;
position: relative;
}

.av-catalogue-title {
font-size: 11px;
line-height: 1.5em;
}
}`

• This reply was modified 9 years ago by lech07.

Thank you Yigit, although I still cannot get it to work. Do I need to make the go_monthly button link to anything?

Looking at the HTML source, this is the Stripe button that I want to be executed when the go_monthly button has been clicked.

</div></div></div><!-- close content main div --></div></div><div id='after_section_4' class='main_color av_default_container_wrap container_wrap fullsize'   ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-6542'><div class='entry-content-wrapper clearfix'>
<section class="av_textblock_section"  itemscope="itemscope" itemtype="https://schema.org/CreativeWork" ><div class='avia_textblock '   itemprop="text" ><form method="POST" action="" class="sc-checkout-form" id="sc_checkout_form_1" data-sc-id="1" data-parsley-validate><br />
<div class="sc_sub_wrapper sc-form-group" id="sc_sub_wrapper_2"><input type="hidden" name="sc_sub_id" class="sc_sub_id" value="Monthly" /><input type="hidden" name="sc_sub_amount" class="sc_sub_amount" value="400" /><input type="hidden" name="sc_sub_interval" class="sc_sub_interval" value="month" /><input type="hidden" name="sc_sub_interval_count" class="sc_sub_interval_count" value="1" /><input type="hidden" name="sc_sub_setup_fee" class="sc_sub_setup_fee" value="0" /><input type="hidden" name="sc_sub_trial_days" class="sc_sub_trial_days" value="0" /><input type="hidden" name="sc_sub_max_occurrences" class="sc_sub_max_occurrences" value="" /><input type="hidden" name="sc_sub_quantity" class="sc_sub_quantity" value="1" /><input type="hidden" name="sc_sub_currency" class="sc_sub_currency" value="usd" /></div><br />
<input type="hidden" name="sc-name" value="An Awesome Plan" /><input type="hidden" name="sc-description" value="Subscribe for $10 per month" /><input type="hidden" name="sc-amount" class="sc_amount" value="" /><input type="hidden" name="sc-redirect" value="https://www.cheapflightsny.com/welcome/" /><input type="hidden" name="sc-redirect-fail" value="https://www.cheapflightsny.com/error/" /><input type="hidden" name="sc-currency" value="USD" /><input type="hidden" name="stripeToken" value="" class="sc_stripeToken" /><input type="hidden" name="stripeEmail" value="" class="sc_stripeEmail" /><input type="hidden" name="wp-simple-pay" value="1" /><input type="hidden" name="sc-details-placement" value="above" /><input type="hidden" id="wp-simple-pay-pro-nonce" name="wp-simple-pay-pro-nonce" value="e58311f56a" /><button class="sc-payment-btn stripe-button-el"><span>Go Premium</span></button></form>
</div></section>

And here is the go_monthly button that I want to execute this query

<div class='avia-button-wrap avia-button-center avia-builder-el-33 el_after_av_iconlist avia-builder-el-last go_monthly'><a href='https://www.cheapflightsny.com/' class='avia-button av-icon-on-hover avia-icon_select-yes-left-icon avia-color-custom avia-size-small avia-position-center ' style='background-color:#ff3300; border-color:#ff3300; color:#ffffff; ' ><span class='avia_button_icon avia_button_icon_left ' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span><span class='avia_iconbox_title' >Go Premium</span></a></div></div><div class="flex_column av_one_fourth flex_column_div

Is the jquery code correct to do this? I’m not sure why it is not working.

Edit: I apologize for any confusion, I changed ‘gpmonthly’ to ‘go_monthly’

• This reply was modified 9 years ago by rauschworks.

Wow that was pretty extensive, thank you very much.

I tried to edit the text to make it white, and move it down a bit, i edited the class iconbox_icon, but it’s also changing other icon boxes on the page.
I tried to edit these classes as well, .custom_iconbox, custom_textblock and nothing happened.

Any idea how i can change the things just for these icon boxes and not the rest?

hi Yigit,

thanks for replying.
I have done that but nothing changed? I added this code as you said and changed some parameters and tested to see if it changes.
.customIcon .iconbox_icon {
font-size: 15px!important;
width: 30px!important;
height: 30px!important;
line-height: 30px!important;
}

of course I gave the icon box customIcon in its quick css.

1- You still did not answer my question about “I would have to add a new css for every magazine cover I use on that page and change “wp-image-315” to the new image? Is that correct?”

2- what would be the class name in the css?

.avia-button-wrap span.avia_iconbox_title {
font-size: 12px;
}

Would it be something like this?
Custom Css Class = magazinebutton
Quick Css code – .avia-button-wrap span.avia_iconbox_title.magazinebutton {
font-size: 12px;
}

Is that correct?

OK, the image below shows that I have gotten a little closer by turning on the ability to see the shortcodes. But, I would still like to:

(1) Have a rollover effect on hover identical to the one in the header. In the header, the icon gets a background color matching the social media channel’s brand color upon hover. (e.g. when rollover Google Plus icon, a red circle appears)

(2) Keep the icon color (green) when the IconBox shortcode is placed within a widget.

(3) Remove the <H3> tag around the IconBox Title field.

I’m starting to understand this will require the use of a custom CSS class. Some really simple step-by-step instructions on how to go about setting this up would be helpful.

The shortcodes that I generated within the Avia Layout Builder and pasted into the widget are:

[av_icon_box position='left' boxed='' icon='ue8f7' font='entypo-fontello' title='Join the MTWC Community of Practice' link='manually,https://plus.google.com/communities/116656021291464268492' linktarget='_blank' linkelement='both' font_color='custom' custom_title='' custom_content='#00833d' color='custom' custom_bg='' custom_font='' custom_border='']
What is a Community of Practice?
[/av_icon_box]

[av_icon_box position='left' boxed='' icon='ue805' font='entypo-fontello' title='Join the MTWC Network' link='manually,https://docs.google.com/forms/d/e/1FAIpQLSfstsf_8FSDTrfmG0t-HTXECHGXkOMxcw5t0sFksqTJslZN8Q/viewform' linktarget='_blank' linkelement='both' font_color='custom' custom_title='' custom_content='#00833d' color='' custom_bg='' custom_font='' custom_border='']
Use the contact form to join and stay up-to-date with the Transportation Workforce community.
[/av_icon_box]

[av_icon_box position='left' boxed='' icon='ue8f2' font='entypo-fontello' title='Follow Us on Twitter' link='manually,https://twitter.com/uwmtwc' linktarget='_blank' linkelement='both' font_color='' custom_title='' custom_content='' color='' custom_bg='' custom_font='' custom_border=''][/av_icon_box]

[av_icon_box position='left' boxed='' icon='ue8fd' font='entypo-fontello' title='Join the MTWC LinkedIn Group' link='manually,https://www.linkedin.com/groups/8201036' linktarget='_blank' linkelement='both' font_color='' custom_title='' custom_content='' color='' custom_bg='' custom_font='' custom_border=''][/av_icon_box]

hi ismael
the above peace of code, ive changed the

var iconbox = $(‘.iconbox’),
into
var iconbox = $(‘jelle.iconbox’)

in the quick css ive put:
#top .jelle.iconbox {
cursor: pointer;
}

now i can see a custom class field below the text field in the icon box, see image ccf.jpg
i fill in : jelle
and yes, the pointer is now for the whole box. but…still ONLY the title is linking to the destination page.
there is a ‘hand’ – pointer over the rest of the text, but once clicked its not linking
see: http://jeelsites.nl/veiling/ (were talking about the left box called: Test.
what is going wrong?

NB: the code looks like this now:
<script type=”text/javascript”>
(function($) {
function a() {
var iconbox = $(‘jelle.iconbox’),
boxlink = ”;

iconbox.on(‘click’, function() {
boxlink = $(this).find(‘jelle.iconbox_content_title a’).attr(‘href’);
window.location.href = boxlink;
});
}

a();
})(jQuery);
</script>

• This reply was modified 9 years, 4 months ago by yampieters.