Suggestion on making this not look like crap?

11 years ago

You can do some minor styling to clean this up.

The iframe widget is inside this div:

Code:

<div style="position: relative; border: #000 2px solid;background-color: #f3f5f5; width: 621px" class="cornerAll">

The div has a class of class="cornerAll" so we need to target that class like so.

You would add this to your stylesheet:

Code:

.cornerAll {
border: #eeeeee 4px solid!important;
width: 700px!important;
background-color: #eeeeee!important;
}

This will override the inline styles inside that div. Of course, change the properties to the colors you want.

I am not a fan of using "!important" to override styles because it should rarely need to be used.
It is misused because of poor css planning and inheritance was not done properly.
However, in this case it's appropriate since your overriding an embedded widget.

[ 1 ] Thanks
1 reply

{{ DiscussionBoard.errors[8128274].message }}

gzibell

11 years ago

David,

Thank you so much. I am tinkering around with that now to see what I can come up with. Is there any way that I can increase the width and make the widget responsive? If I change the width to 100% everything looks the same as before but the widget and the content inside is responsive in my browser all the way down to as small as I was to make it. If I go over that to say 120 or 130% to make that display full width I loose a lot of the responsive function. It works to make the width a little smaller but then it switches to fixed width at some point.

Originally Posted by David V

You can do some minor styling to clean this up.

The iframe widget is inside this div:

Code:

<div style="position: relative; border: #000 2px solid;background-color: #f3f5f5; width: 621px" class="cornerAll">

The div has a class of class="cornerAll" so we need to target that class like so.

You would add this to your stylesheet:

Code:

.cornerAll {
border: #eeeeee 4px solid!important;
width: 700px!important;
background-color: #eeeeee!important;
}

This will override the inline styles inside that div. Of course, change the properties to the colors you want.

I am not a fan of using "!important" to override styles because it should rarely need to be used.
It is misused because of poor css planning and inheritance was not done properly.
However, in this case it's appropriate since your overriding an embedded widget.

Thanks

{{ DiscussionBoard.errors[8128475].message }}

Damien Roche

11 years ago

I'd suggest extending the iframe to around 750px and centering it within the content area, then remove the border and have the background match the contents of the iframe. The idea is to not pronounce the iframe and make it look foreign. The less decoration the better, and the more the iframe content design fits in with your site the better.

You might also consider using a javascript scroll plugin to hide the sidebar unless hovering over the content (should work for iframes):

jQuery NiceScroll plugin - scrolling for desktop, mobile and touch devices

Thanks

Signature

>> Seasoned Web Developer (CSS, JavaScript, PHP, Ruby) <<
Available for Fixed Fee Projects and Hourly ($40/hr)

{{ DiscussionBoard.errors[8128552].message }}

David V

11 years ago

Ok, I see part of the problem.
You are NOT using a full width page template for that page.
You are just hiding the sidebar so the left body content can never become wider.
You must change that page to a full width page template, then you can make the embed wider.

[ 1 ] Thanks
1 reply

{{ DiscussionBoard.errors[8128583].message }}

gzibell

11 years ago

You are my hero right now. I got that switched and I think it is looking much better now. I am satisfied with where it is at for now. I would love to get the height to dynamically expand/contract when opening/closing the groups and get rid of that scroll bar but I am guessing that is pretty complicated. I tired adding a height attribute to the code that you provided but that only extended the background.

Originally Posted by David V

Ok, I see part of the problem.
You are NOT using a full width page template for that page.
You are just hiding the sidebar so the left body content can never become wider.
You must change that page to a full width page template, then you can make the embed wider.

Thanks
1 reply

{{ DiscussionBoard.errors[8128641].message }}

David V

11 years ago

Originally Posted by gzibell

...I would love to get the height to dynamically expand/contract when opening/closing the groups and get rid of that scroll bar but I am guessing that is pretty complicated. I tired adding a height attribute to the code that you provided but that only extended the background.

I would skip that idea.
If you can't live without it, I would use a company that does not use iframe embedding so you have full control over everything.

Thanks

{{ DiscussionBoard.errors[8128660].message }}

gzibell

11 years ago

That is what I thought. This is working amazingly right now. Maybe in the future I will look into a different company but hopefully I can get by with this and maybe the current company will improve their offerings. Thank you so much for all of you help.

Thanks

{{ DiscussionBoard.errors[8128664].message }}

David V

11 years ago

No problem. And, I think it looks pretty good, blends with the page better now.

Thanks

{{ DiscussionBoard.errors[8128671].message }}

SmallBizWebsites

11 years ago

Heather, your Home page looks unattractive because the colors used do not belong to what is called a "color family" (Google that term). Pink and grey do not match whatsoever, and it makes your site look like it has a styling problem.

Thanks

{{ DiscussionBoard.errors[8129245].message }}

Suggestion on making this not look like crap?

Trending Topics

Infographic: How B2B marketers on LinkedIn can maximise their efforts for better audience reach

Any thoughts on golf's latest phenom...Scottie Scheffler??

What's the Best IM-Related Skill to Learn Today That Can Help in the Future?

best high quality crypto traffic.

Some interesting stats about brand comms