I added a google + followbutton to my website with the following code:
<g:plus href="https://plus.google.com/100827824854155199322" rel="publisher" width="250" height="69" theme="light">
I need the background of it to match the background of the container its in but im not sure how. I tried seeing what classes it was using and then setting them to my bg color with css but it did not work.
You can see what I mean on the right hand side on my website
http://www.beatmushroom.com/2012/05/phaeleh-afterglow-feat-soundmouse-akira.html#more
There is an open feature request to allow customization of badge background colors.
After using Google Chrome -> Inspect Element and fidgeting around your website,
I think this would be your solution
.yeb{
background-color:<insert your colour code>;
}
that would go into your css file.
Related
I use shortcode to embed an HTML world map on one of my web pages. Right below the world map is a third party link for which I want to set the display value to "none", however since I have no CSS skills or web dev background I am having difficulty writing the custom CSS for this. I've played around with containers and specific page ID's, but no luck. The page is www.sheerheroine.com/map. Can anyone steer me in the right direction on how to write the code please? When I inspect the page I can see which container the link is in, however when I use this container the entire map is removed. Thanks!
The !important declaration makes the display CSS impossible to override. The following javascript would remove the element you wish to not display -- document.getElementsByClassName('fm-map-container')[0].childNodes[3].remove();. Try it in the developer's console. For it to work on the page, you would need to delay the execution until the element exists though. As others suggest, it would seemingly violate the terms of use of the lovely vector map you are using free of charge. For a proof-of-concept, however, you may find this code enlightening.
As the entire map con-taint is coming because of thirdparty image, better check with the that third party style code.
Or
in alternatively, just check the the height of the total map area.
lets assume here total height of map image is 10px from bottom.
and lets assume the height of that area(to which area,you don't want to show user) is 2 px from bottom.
Then create a div element, where you will put the entire map image, but follow the below stlye, where we can hide some portion of image to user
<div style="max-width: (10 - 2)px"> here .. put your map image url..</div>
For my website we use custom style sheets that are stored locally on our server and are injected into the webpages. However when i add them to CKEditor and then attempt to resize or move an image with the enhanced image plugin they cannot be resized or moved at all. Has anyone encountered this problem before? Is there anyway around it?
edit: So i add my css files using
config.contentsCss = ['http://fonts.googleapis.com/css?family=Droid+Sans',
'http://fonts.googleapis.com/css?family=Bree+Serif',
'http://fonts.googleapis.com/css?family=Droid+Sans+Mono',
'http://192.168.0.50/css/new/all.css?v=1" media="all',
'http://192.168.0.50/css/new/templates.css?v=1',
'http://192.168.0.50/css/pre_review/colors.css?v=1',
'http://192.168.0.50/css/pre_review/paged_test.css?v=2',
'http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1',
'http://192.168.0.50/css/pre_review/main.css?v=1',
'text/css'];
I have also installed the Enhanced Image plugin to allow me to resize and move images around. however when i insert an image on to the page the source looks like
<p><img alt="" height="239" src="http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png" width="239" /></p>
when i originally set the image width and height in the popup panel i set the values to 2 and 2, these values do nothing to edit the actual size of the image. It still displays at the full size of 239x 239.
I know that it is my added styles that are causing this error as it works fine without them, However i do need them. is there anyway around this without having to remove the styles?
First of all, your contentsCss has some weird parts like the last item or this 'http://192.168.0.50/css/new/all.css?v=1" media="all'. Please verify that all this works. Incorrect rules may affect CKEditor.
Second, the issue may be very simple - your CSS most likely affect widgets styling. Disable loading your CSS files one by one and see which one breaks the Enhanced Image plugin. Then find the rule that breaks it and then improve the rule so it does not affect images.
Based on my research and the many posts on this subject, I understand that I cannot alter the CSS in the iframe based on the domain tree security policy. However, I am sure (or hope) there has to be a developer out there that has implemented a way to run the iframe locally on their domain and therefor gain access to alter the CSS attributes.
All I need to do is change the calendar grid (array) background and border colors. Please do not tell me you can change the bg-color in the tool, because all that does is change the header. The border is blue and the bg-color of the grid is defaulted to white.
Any direction would be much appreciated.
Look at this:
http://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/
It is described there how to change google calendar css.
I am working on a Joomla 1.5 website and a little self-contained php application, which I want to show within an IFRAME inserted in an article. The template I am using for the website has a dark grey background and the IFRAME shows grey background when loaded in Firefox (I don't quite know why this is so, but I like it like this). However, when the page is loaded in IE, the IFRAME has white background (understandably).
How can I make the IFRAME copy the background color of its parent document also in IE?
Also, I have another unanswered question related to IFRAME usage and Joomla 1.5, which I would like to point your attention to.
If the self-contained application is on the same domain as the article page, you could access the top frame (with the article) through javascript - like this:
document.body.style.backgroundColor = getComputedStyle(window.top.document.body);
Computed style can be get as described in this article.
Your other option is to add a query string parameter for the iframe, like bgcolor= - this is a more widget-like approach, and will make the stand-alone application more configurable. I personally recommend this approach - it will not rely on javascript and it will not flicker if the execution gets slow.
In my website I have an image as the navigation bar and have created hotspots to link them to different pages. The problem is since the text is a part of the image, I cannot change the style of the text on hover. Whereas I want the text/the hotspot to stand out on mouseover, so I learn the background color could be changed on mouse over. Is that possible? Is there a way to do that in CSS, using the area or maps. If Javascript is to be used, could someone help me out with it.
Is there a reason you've used a single image as the nav bar?
Instead of a single image with hotspots, I'd use an individual image for each navigation link. That way you can easily change the image (or use CSS image positioning) on hover. This is described here:
http://css-tricks.com/video-screencasts/7-three-state-menu/
along with many other places I'm sure.
I don't think it's a good idea to use neither image maps nor individual images.
Instead, use CSS sprites: a single image file, add that as a background image to the menu links, but position the background images differently. See this Line 25 tutorial for more information.