I want a widget that is roughly square, the same height as the 16x16 pixel .ico widgets on Widget Row (or whatever the technical term is for that row of widgets at the bottom of the Firefox window) containing a single letter of text, centered horizontally and "middled" vertically, with control through add-on code of text and background color. Can this be HTML coded as the content property of the widget object? I've gotten the colors with a style attribute of a span around the letter, but no luck so far getting the "box properties" to kick in.
not sure what you are trying get but you can do create that with the style attribute very easily. http://jsfiddle.net/k9brL/
Related
CSS Custom Scrollbar style
I've been having a hard time customizing the scrollbar the way I intend and maybe it's not even possible.
I want to add a custom image to the scrollbar-thumb background with rectangles on both ends of it. The conceptual idea is to be able to keep top and bottom of the scrollbar-thumb with a custom icon image, but I represented it as a rectangle in the example.
Since the size of the scrollbar is not always the same I'm looking for a way to achieve what I described before.
I've failed to do it using ::-webkit-scrollbar.
Visual example:
I want to align this image in this way. I am making an HTML email signature. I know I can do this with margin negative or position relative but I am using the table and their child tags here and I don't want to use margin padding position properties as these properties do not support by many email platforms like outlook.
So, all I need is to align the image in this way by using table tags and their properties.
Thanks.
Not possible as individual elements.
You're relying on a background image plus margin or padding to push the image down into place. This isn't just html email you're building that will be received once, you're building html that is effectively being forwarded and code will be stripped depending on the system you import the signature into as well as any email client cleansing the signature when receiving the signature.
Your only option is to have the white/yellow background, photo and text on the pink tab as one image.
How can I implement a custom control which has the groupbox look, with a piece of text slightly overlapping the outside border and text contained inside?
If it's a case of design integration, then your best bet might be to create a ContentControl-derived control with a template that has a root Grid with a Border element, a TextBlock for the label overlapping the Border and a ContentPresenter inside of the Border. Check the default Button template for inspiration since it might be quite similar.
I have rectangle which act as container for other elements.
Can I somehow setup some property of rectangle to round its corners, in fact, to get rounded box.
In css it is easy, but how to do in SSRS?
Actually, it is fairly easy. I had a bunch of text boxes that a rounded corner border needed to be placed. The first thing I tried was an image control. I placed it on top of my text boxes and set it to "Send to back." It worked well in print rendering, however, in the browser rendering the HTML placed the textboxes after the image making it look horrible.
The solution was this:
Go into paint and draw a rounded corner box the size you need.
Cut the set of text boxes to surround with rounded border.
Place a rectangle control over the entire area all the text boxes covered.
Paste my text boxes onto the rectangle.
Right-Click and choose rectangle properties.
Select the Fill Tab and select "Embedded" image source.
Click Import and select your paint image(i used PNG but it shouldn't matter).
Click Ok.
Find and expand BackgroundImage on Rectangle and change BackgroundRepeat to "Clip.". Otherwise, your image is repeated.
The report should now render properly in both print and html rendering views. Unfortunately, this doesn't seem to stretch/size, so unless you can figure that one out, you will have to repeat whenever you need a different sized rounded box.
Brian
All solution I have seen use a background image inside a textbox.
But you get problems when you try to resize the textbox.
The solution is to insert a 3x3 table inside the texbox.
Insert the 3x3 table
Insert an image on each corner. They will be a quarter of a circle each. (This image is created in MS Paint or your favorite image program)
Make those 4 corners cells unresizable (Set property CanGrow to false). Make sure all the other cells have CanGrow = true if you need it
Make all the cells the same background color (same color as the image you draw).
Write your text in the middle cell.
OPTIONAL: It might also be a good idea to fuse the 3 vertical middle cells if possible. It will allow more space to write text in the cell.
This way you won't have to create new image everytime the size of your textbox change.
You would have to build an image that has a transparent center for adding your text.
All this would be more work than I would want to do just for a report.
I would stick with just the standard textboxes.
I have a Facebook like button on my site. The site, however, uses primarily content that's centered on the page, and the button is stubbornly left-justified. I've set a custom width on the button to get it more or less centered, but of course the width changes, and sometimes the nominal width includes more or less white space. This makes it look like it isn't centered.
I think if I could get the whole 450px wide by arbitrary height (changes if profile pics of people who liked it appear) region to be shaded it'd look better and feel less off-center. How is this possible?
I just put a table element around the button:
<table bgcolor="DDDDDD" border="1"><tr><th>
<!--Facebook like button stuff goes here-->
</th></tr></table>
I ended up just leaving a border around it without even using the bgcolor attribute. I guess bgcolor is deprecated and using html tables is bad form and there's probably a way sexier CSS solution, but this got the job done.
Another probably better option, and what I did in the production site, was use an AddThis box and a bit of css to set the width of the addthis div and then set the margins on each side to be automatic (and therefore equal, centering the div).