- This topic has 10 replies, 2 voices, and was last updated 12 years, 9 months ago by
.
-
Posts
-
If I add the following to my custom css, I’d expect to see green behind image anchors and red behind text anchors. I see red behind both. Could this be a bug in Lightbox?
.lightbox_ultimate_anchor {
}
.lightbox_ultimate_image_anchor {
background-color: green;
}
.lightbox_ultimate_text_anchor {
background-color: red;
}
I have an image based anchor on http://dev.socialmarketingnoise.com/ and a text based anchor on http://dev.socialmarketingnoise.com/my-account/login/.
Thanks!
Steve
Hi, What shortcode are you using for the image anchor here: http://dev.socialmarketingnoise.com/
[wp_lightbox_ultimate_youtube_video_embed videoid="0v6ey6UolCQ" width="900" height="507" hd="0" autoplay="1" display_control="1" fullscreen="1" autohide="1" theme="dark" use_https="1" enable_privacy="" show_logo="0" showinfo="1" auto_popup="" direct_embed="" anchor_type="image" text="SMN Intro" source="/wp/wp-content/uploads/2012/05/Overview.jpg"]And… I get the same red background if I delete the
"text="SMN Intro"tag completely…Thanks!
Steve
Hi, Instead of hardcoding the css for an anchor you can also make your own css class and pass it through the shortcode. Instructions are available here (option 2):
We now recommend users to follow the above method for styling an anchor image or text.
Thanks, I was following some other forum posts I found, and they didn’t reference this method. I already had the CSS defined for other links, so this was an easy change. This is almost working. The only issue I have now is that the rendered “text link” isn’t obeying the font color declaration in my css. Let me know how I can send you an email with a temporary username and password to log into the site, along with a page that has the text link I’m trying to use.
In the mean time, here’s the shortcode that I’m using, followed by the style declaration for the class “nav-button”. My issue is that the text is being rendered as black instead of white.
Shortcode
<p>[wp_lightbox_ultimate_inline_content_embed class="nav-button" div_id="Workshop_help" anchor_type="text" title="" text="Need help?" source="" auto_popup="false"]</p>
<div id="Workshop_help" style="width: 380px; height: 480px;">[si-contact-form form='3']</div>CSS Definition
.nav-button {
-moz-border-radius:6px;
-moz-box-shadow: 3px 3px 5px 2px #888;
-webkit-border-radius:6px;
-webkit-box-shadow: 3px 3px 5px 2px #888;
background-color:#009ab9;
background:-moz-linear-gradient( center top, #009ab9 5%, #10aac9 100% );
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #009ab9), color-stop(1, #10aac9) );
border-radius:6px;
border:1px solid #dcdcdc;
box-shadow: 3px 3px 5px 2px #888;
color:#fff;
display:inline-block;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#009ab9', endColorstr='#10aac9');
font-family:lato;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
}
.nav-button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #10aac9), color-stop(1, #009ab9) );
background:-moz-linear-gradient( center top, #10aac9 5%, #009ab9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#10aac9', endColorstr='#009ab9');
background-color:#10aac9;
}
.nav-button:active {
position:relative;
top:2px;
left:2px;
}
a.nav-button:link {color: #fff;}
a.nav-button:active {color: #fff;}
a.nav-button:visited {color: #fff;}
a.nav-button:hover {color: #fff;}Sorry, but I can’t post a link. It’s on a private membership page. If you can contact me at my email address, I’ll email you a link, a username and password to log into the site.
Thanks!
Steve
I have sent an email to your registered email address for site access. Let me know if you don’t receive it.
- You must be logged in to reply to this topic.