I'm working on a blog page for a site that's currently running on Joomla 1.5 (slowly rolling out upgraded templates but I need this one to work in the meantime).
I'm using the Facebook like box and have the Facebook header set to 'false' I've got the module title set to show, but it's not appearing on the page. The Facebook code is set in a custom module and I have several other custom modules on the page with functional titles.
I've got the same set up on a separate blog page in Joomla 3 that is working without issues. Is this just a lack of compatibility with Joomla 1.5?
Here's the page for your review http://discoverestevan.com/index.php?option=com_content&view=category&layout=blog&id=22&Itemid=455
Not the most elegant solution, but I ended up using an ID within the module that applied to the 'header' space of the Facebook widget. Note that I could not leave it the default ID name or it applied the title styles to a checker div at the top of the page with the same ID name.
I used :before to write the title text in via CSS. The final CSS code looks like this:
#fb-head {
background: rgb(212, 31, 60); /*Logo Colour: #b31c27*/
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 10px;
margin-right: -2px;
}
#fb-head:before {
content: "Find Us on Facebook";
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
line-height: 20px;
font-weight: bold;
}
With this custom module code:
<div id="fb-head" class="hidden_div"> </div>
<div class="fb-like-box" data-href="https://www.facebook.com/pages/CJ1280-Radio/168180086627809?ref=ts&fref=ts" data-height="513px" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="false"> </div>
Related
I'm creating an email template and, when testing things on Email on Acid, the Samsung Mail version converts all dates and the word "Today" into an hyperlink. Obviously none of these are actually coded as one.
Any ideas on how to prevent this?
Try adding this to your CSS. This is the most common styling override for that very issue on Samsung Mail.
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
I have created an email template for our site. When I look that email template in outlook 2013, I'm getting collapsed layout. But, I'm getting expected email template in other mail clients like gmail, etc.
I'm aware, outlook renders using "Microsoft word engine", but i couldn't figure out where i go wrong with my code. Here is the code i have used
.header img{
margin-left: 25px !important;
margin-top: 46px !important;
vertical-align: center;
}
.footer-social-links{
float: right;
margin-right: 20px;
margin-top: 15px;
}
Outlook doesn't recognize margin with a lowercase m. Furthermore it has buggy support for margin. As an example, there's no support for margin-top.
https://www.campaignmonitor.com/css/box-model/margin/
For a top margin replacement, consider using line-height or a spacer table.
Good luck.
I developed an iPhone application using PhoneGap everything works fine, I sent the app for review to publish on the App store.
I received a rejection report stating the issue:
8.6 : Google Maps and Google earth Images obtained via the Google Maps Api can be used within an application if all brand features of the
original content remain unaltered and fully visible. App that cover up
or modify the Google logo or copyright holders identification will be
rejected.
I use Google Maps API v3, on a PHP page that I load with Ajax into my application. I don't hide anything but the logo does not appear in the application, it only appears on the web browser or on Safari on my iPhone.
The link is http://mourady.me/alhokair/iphone/maps.php.
Here is How I solved my problem , i found out it something concerning the height of the map canvas with height of the div the the canvas is loaded into as i was using phonegap.
so i loaded google maps in my webbrowser normally and copied the logo div and changed its position to apear in the mobile map and apple accepted that easily
<div style="margin: 2px 5px 2px 2px; z-index: 1000000; position: absolute; left: 0px; bottom: 66px; "><a style="position: static; overflow: visible; float: none; display: inline; " title="Click to see this area on Google Maps" target="_blank" href="http://maps.google.com/maps?ll=42.228517,164.003906&z=2&t=m&hl=en-US"><div style="width: 62px; height: 24px; cursor: pointer; "><img style="position: absolute; left: 0px; top: 0px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; width: 62px; height: 24px; " src="http://maps.gstatic.com/mapfiles/google_white.png"></div></a></div>
I want to do this
This is select drop down of form
My code is
HMTL
<select>
<option>Country</option>
<option>India</option>
<option>USA</option>
</select>
Css
select{
width:197px;
height:45px;
border:solid 1px #13669b;
box-shadow:0 5px 2px 0px rgba(0,0,0,0.06) inset;
background:rgba(256,256,256,0.7);
color:#13669b;
font-size:16px;
font-family: 'LatoBold';
padding:0 14px;
line-height:45px;
}
I want to this only pure css. How?
There is no way to create a dropdown box like that with pure css (yet).
You can create your own js/css dropdown plugin or use one of the many jQuery/css plugins already available.
I am not sure if there is EASY cross browser way to do it but if you with combination of CSS + jQuery, you can get it working in all browsers in use:
Reinventing a Drop Down with CSS and jQuery
See the tutorial on how to do it and modify the CSS for the look you want.
Screenshot:
This solution works with pure CSS but it's Chrome-related. See the following example:
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../images/select-arrow.png),
-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
Haven't tried to replace the -webkit prefix by a -moz one for it to be compatible with Firefox browsers, it might actually work as well, you should give it a go.
Dropdowns are implemented differently in different browsers, and styling is not widely supported. This has it's reasons. For one: consider the dropdowns on iPads/iPhones. They work radically different than desktop application dropdowns.
If you want a styled dropdown, you will have to build it yourself with lists and javascript. Or use one of numerous libraries available for this (which is further proof that no pure CSS solution is available).
I have always wanted to add Facebook share buttons to my applications, but the problem that I have is that they all look different. I see sites like this that have custom designed share buttons. Does anybody know a good tutorial, or have any pointers, about how to tackle this?
Sharing something one facebook is quite easy, here is the HTML for my custom share button.
<div id="share_div">
<div id="share">
<a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
Share
</a>
</div>
</div>
Where all the {{variables}} are to be replace by correct value :
fbapp_id is the id of your facebook application.
link_url is a link attached to the shared content (like a link to your site)
and share_message|urlencode is the message that is shared and it needs to be urlencoded.
Also here some css to style this like a real facebook button :
#share {
border:1px solid #0D386F;
background-color:#5D7DAE;
height:24px;
width: 100px;
}
#share a.click {
font-size:13px;
font-weight:bold;
text-align:center;
color:#fff;
border-top:1px solid #879DC2;
background-color:#5D7DAE;
padding: 2px 10px;
cursor: pointer;
text-decoration:none;
width:80px;
display:block;
}
But I let you the pleasure of customizing as you like, the important part being the href of the a tag
Does it answer your question ?