I'm using google web designer and I need to make an expanded panel expand from the centre out. At the moment the choices I have are only top, bottom, left right.
I also need to make the background of the expanded panel transparent. (it's currently white by default.)
Any help would be appreciated!
Thanks.
You can not expand your banner center out.
The only option you have is Top, Bottom, Left & Right. So don't waste your time on that.
For transparent background, you can style your main div as background-color:transparent,
But, the publisher may put your html5 div on another div with some background color (Yes, usually the publisher want to distinguish the banner from the website content)
But that part is negotiable, if the publisher approved transparency, you can test your banner on DoubleClick Studio by going:
creative-> Preview tab -> select 'Show Details' button -> On the left hand side choose 'Display Option' -> at the buttom of the opened dialog, you will see a checkbox named: 'Transparen', check that.
But remember it is a test when the Media Agency publishes you banner to the Publisher UI they can remove the transparency, so first get approval for that.
Related
I am having an issue with a site I am developing on iPhones. When I click a select element on my phone it zooms the website out and adds white space to the right side of the screen.
This only occurs when I click one of the two dropdowns that are on the right side of the screenshot (Industries or Category). While if I click a dropdown on the left side (Services, or Companies) It doesn't add the white space to the left of the screen.
I can't seem to figure out what is causing this issue?
EDIT: A little harder to see in the screenshot, but the blue filters block should be all the way to the right size of the screen, but white space is added to the right side when a dropdown is selected.
I am usually a back-end developer that tries to become fullstack and I came to a little problem.
What I want to do is have a button that on click slides to the other side and changes the background. I am familiar with how to make an event on click and actually change the background. My problem is how to make the CSS so it looks good.
Lets say I have black and white themes. I want to have a box with white and black sides. When I click on it I want one of the sides to shift.
Here is how I want it to look.
The idea is to click on the box and the black part to move. Basically the white part is the background and the black part is the button that slides with some animation. Then the black part switches its color to opposite of the current background.
Basically the colors just swap but with cool sliding animation.
I know that I need one div for the box with background the current background.
I also know that I need another div to be the actual part that moves with background opposite of the current one.The inner dif will have a button inside of it that on click will call the function that changes the background.
What I can do so far is
<div class="box">
<div class="slider">
<button onClick="changeBackGroundColor()"></button>
</div>
</div>
The slider div will have half the width of box and full height of box.
Now comes the tricky part - how can I add if in css so that I can always check what is the current background and make the background of slider the opposite of the current one?
Also - how can I make it slide to the border of the box? I need to make the sliding in both directions. From right to left when the theme is white and from left to write when its black.
Hi all,
I am trying to place floorplan image (Using object tag) within the brown border in the tool i created. Then i try to display the same floorplan on the other page. But if you notice the two images i shared, border of the two floorplans within its graphic varies (Black outer border) . CSS is exactly same on both the page. I do not know what could be the reason behind the graphic shift
It has to do with how the image was created. The spacing on the left side is part of the art board while the top side could be the image escaping the container.
I want to customize the body of the Wordpress Theme "attitude" in a way to remove the grey gap between the header (white space) and the top of the page. In other words, I want to remove exactly this grey gap and also the grey gap between the end of the body near the footer and the end of the site.
Here is a live demo of attitude: http://themehorse.com/preview/attitude/
Thank you very much in advance and please dont hesitate to contact me if there are any questions.
Best regards
From a quick look using the chrome dev tools, the header element seems to be the culprit. It appears they are applying a 30px top margin to it using the branding id selector.
#branding {
margin-top: 30px;
}
You can change this on line 549 of style.css.
Now for a lecture...
Not really, but I want to show you a few things to help you solve these types of problems in the future - It never huts to know more about the tools available to you.
You can open chrome dev tools by right clicking anywhere on the page and selecting Inspect element, or use the keyboard shortcut for your OS
In the very top left corner of the chrome dev tools panel that pops up there is a mouse pointer in a box symbol. If you click it to enable it and then move your mouse around the page you will see elements being highlighted in various colors.
Here we can see that the grey bar at the top has been highlighted in orange, and a large section below was highlighted in blue.
Clicking the left mouse button while the element is highlighted as above will jump to the element in the Elements tab of the inspection tools. We can see that the element we selected was a header, with an ID of branding
A quick scroll through the styles inspector on the right reveals a id selector for branding and a declaration to set the top margin to 30px. The inspecter is also kind enough to tell us where in the source code the rule comes from; style.css, line:549.
If we switch to the Source tab and open style.css in the inspector (or open the source code in a text editor) then we find the branding id selector on line 549 as promised.
For more information on how to explore webpages i recommend you read the dev tools guides for google chrome or mozilla (which ever browser you prefer to use most)
Firefox: https://developer.mozilla.org/en-US/docs/Tools
Google Chrome: https://developer.chrome.com/devtools
The reason the header is spaced off of the top by a little bit is because the header tag with the id 'branding' has the CSS property margin-top with the value 30px. This causes the header tag to be set 30px from the top of the screen. Just delete that line of CSS code to move the body to the top of the page.
I am using ckeditor and I have a number of pictures in my content. One issue i see is that you have the ability to add horizontal or vertical space around a picture but you can't just set a right or just a left horizontal picture. Normally if I have a picture on the left side of a page and the content to the right, I would just want to set the right margin (to avoid the image being indented on the left)
from looking at the ckeditor demo, I only see the ability to set the space on both sides of the picture. Is there anyway around this without having to do custom css as I want to give this feature for non technical users?
this uses custom css, but its in the ckeditor ui; right click on the image, click on the advanced option tab; change the margins to fit your needs. flushed left, margin-left:0; flushed right will be margin-right:0
When we right click image in ckeditor demo, It is showing one option as image properties. When we click on this a model window will popup. This model window has alignment property. One can set it to left or right as required.
Hope this will help you.
What if we put 0 in hspace and 0 in vspace and adjust alignment = left|right.