Feed Box coding.

ko04

Hey everyone,
I decided to add a feed box to my website instead of trying to match my blog to my new website so with that being said does anyone know how to customize the feed's. I want to add a border around my images and also change the color of my links currently they are blue. I am also noticing that the feed box is making the images look a little smushed so would anyone happen to know how to fix that? Thanks a lot guys. I feel like I am nearly there with my new site and almost made it look exactly like it is now with the exception of a few things. This is partly in thanks to some of the people on here so thanks for everyone's help!

ko04

I am going to try bumping this to see if I can get help on this matter

onesilop

I have been playing around with my feed, trying to make it look ok, and came up with this CSS.


.sm-feed
{
background-color: rgba(17, 17, 16, 0.3);
padding-left: 10px;
}

.sm-page-widget-feed .sm-feed-item .sm-feed-item-title {
max-width: 950px;
display: inline-block;
}

.sm-page-widget-feed .sm-feed-item .sm-feed-item-description {
margin-top: 8px;
max-width: 950px;
}

.sm-page-widget-feed .sm-feed-item img {
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto
}

The problem I am having is that it changes the look of the feed when I click done on the css box but it makes no change when I publish it.

thenickdude

Try adding .sm-user-ui in front of each of the selectors you currently have, e.g.:

.sm-user-ui .sm-feed
{
background-color: rgba(17, 17, 16, 0.3);
padding-left: 10px;
}

The problem you currently have is that because the SmugMug default CSS includes ".sm-user-ui" in the front of their selectors, that makes their rules more specific than yours (because their rules are longer), so their rules get applied in preference to yours. If you add the .sm-user-ui into the front to match SmugMug, you should take precedence.

The other way to force it to be applied is to use !important:

.sm-feed
{
background-color: rgba(17, 17, 16, 0.3) !important;
padding-left: 10px !important;
}

onesilop

Lamah wrote: »

Try adding .sm-user-ui in front of each of the selectors you currently have, e.g.:

.sm-user-ui .sm-feed
{
background-color: rgba(17, 17, 16, 0.3);
padding-left: 10px;
}

The problem you currently have is that because the SmugMug default CSS includes ".sm-user-ui" in the front of their selectors, that makes their rules more specific than yours (because their rules are longer), so their rules get applied in preference to yours. If you add the .sm-user-ui into the front to match SmugMug, you should take precedence.

The other way to force it to be applied is to use !important:

.sm-feed
{
background-color: rgba(17, 17, 16, 0.3) !important;
padding-left: 10px !important;
}

Thanks for that, now working a charm...

ko04

Lamah wrote: »

Try adding .sm-user-ui in front of each of the selectors you currently have, e.g.:

.sm-user-ui .sm-feed
{
background-color: rgba(17, 17, 16, 0.3);
padding-left: 10px;
}

The problem you currently have is that because the SmugMug default CSS includes ".sm-user-ui" in the front of their selectors, that makes their rules more specific than yours (because their rules are longer), so their rules get applied in preference to yours. If you add the .sm-user-ui into the front to match SmugMug, you should take precedence.

The other way to force it to be applied is to use !important:

.sm-feed
{
background-color: rgba(17, 17, 16, 0.3) !important;
padding-left: 10px !important;
}

onesilop wrote: »

I have been playing around with my feed, trying to make it look ok, and came up with this CSS.


.sm-feed
{
background-color: rgba(17, 17, 16, 0.3);
padding-left: 10px;
}

.sm-page-widget-feed .sm-feed-item .sm-feed-item-title {
max-width: 950px;
display: inline-block;
}

.sm-page-widget-feed .sm-feed-item .sm-feed-item-description {
margin-top: 8px;
max-width: 950px;
}

.sm-page-widget-feed .sm-feed-item img {
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto
}

The problem I am having is that it changes the look of the feed when I click done on the css box but it makes no change when I publish it.

onesilop wrote: »

Thanks for that, now working a charm...

Thanks for the help on this both of your coding works great! I have one more issue that I'm trying to figure out and I can't seem to get it. Its the color of my links I am trying to change them but I can't seem to figure out how. I found the "ID" but its not working so this is what I have.

.sm-user-ui .sm-feed .yui_3_8_0_1_1377472534218_506 {
  a:link {
COLOR: #0000FF;
}
a:visited {
COLOR: #800080;
}
a:hover {
COLOR: #FF0000;
}
a:active {
COLOR: #00FF00;
}

Any suggestions? Thanks as always!

Hikin' Mike

Try using the prefix ".sm-user-ui"....

.sm-user-ui a {}

ko04

Hikin' Mike wrote: »

Try using the prefix ".sm-user-ui"....

.sm-user-ui a {}

That is changing the linking color on other parts of that page but still not the "share" and "email this" link. I unviled my site, figured I am close enough its just small things now that I have to change. So you can see for yourself what I mean.

Hikin' Mike

ko04 wrote: »

That is changing the linking color on other parts of that page but still not the "share" and "email this" link. I unviled my site, figured I am close enough its just small things now that I have to change. So you can see for yourself what I mean.

Because both of those links are images, not text...