Background colour

samtazbu
(@samtazbu)

10 years ago

Hi Ben !

Hope this finds you well 🙂

I have a new request.

I will soon publish a new series of texts, different in nature and emotion.

I would like for them to appear in the content off the dark-grey as background of the theme, i.e. outside of the normal white background content box. In other words, this whole page would only be off this dark grey. Along with, for all the texts to have the light grey font as seen in the menu bar.

This can probably be done for each specific page through a css code. Even better would be whether it is possible to set it as a preset that could be quickly clicked in the edit page of each page/post? Please let me know which one can be done.

A more general query: is there a media css code out there to limit the responsive width extension of the theme? Let me explain: I carefully edit each of the cover images to appear optimally at 1000 px large (as it appears in my MacBook 13 inch, 1280 px), but I recently realised that a larger screen would expand all the frames a bit larger. Is that correct? Is there a way to “block” the responsive expansion to 1280 px resolution screen max – i.e. any larger screen would still just see the frames as 1280 px large maximum, and not beyond. (Let me know if I should try to explain again 🙂

One third and last question, and after this I really have to switch to the Pro version, as a small token for my biggest appreciation for your invaluable help and availability 🙂

What would be a specific page css code to have literally no automatic left and right margin between the edges of the content html, and the border of the white content frame? I am planning to place images in tables there, and I would like them to cover the whole width of the content zone.

Thanks a ton ! 🙂

Best,

Samuel

Viewing 13 replies - 16 through 28 (of 28 total)

← 1 2

Theme Author Ben Sibley
(@bensibley)

10 years ago
Ah okay, this bits a little strange, but changing those images to display as block elements will remove that space.

You can update your existing CSS like this:
```
.entry-content table img {
  margin: 0 !important;
  display: block;
}
```
Thread Starter samtazbu
(@samtazbu)

10 years ago

Hi Ben,

Merci merci, this indeed removed the vertical margin between the rows. Great!

Quick question finally, and this is more for the sake of learning than to fix a functionality. What is the state of options today for image hover behaviours, and what do you suggest is the best technique to use?

You perhaps remember that I use a plugin that makes it quite easy to insert the two images via a shortcode, and set just the specificities of the transition in the settings of the plugin. I know that a properly designed functionality should be done automatically via CSS, but this worked just as I wanted, till I realised that those shortcodes ‘block’ the size of the image in the table cells, and even though the cell gets responsive, and simple images also reduce proportionally as the screen size decreases, when the shortcode is used, those images keep the set size!

See two examples:

http://www.samvriti.com/writer-in-progress/
http://www.samvriti.com/series/

So I looked into the other proper CSS ways to do that. Via commands on div, a, also the technique with the two images designed one above the other, and the CSS commands a shift from top to bottom to go from normal to hover image… But nothing that seemed to me so effective and simple, and also these still remained ‘blocked’ and unresponsive for screen size changes.

I was just thinking what is your view on this…!

Thanks! Once again.

Samuel
Theme Author Ben Sibley
(@bensibley)

10 years ago
Applying the :hover psuedo-selector works well for changing an image when hovered over:
```
img:hover {
  property: new-value;
}
```
Now, since the images are contained in link elements, it’s best to put the :hover on the link instead, like this:
```
a:hover img {
  property: new-value;
}
```
The reason is that links are keyboard accessible while img elements are not, and links also have a few additional states. For instance, you could fade any images that link to a post someone’s already read like this:
```
a:visited img {
  opacity: 0.5;
}
```
For the most part, I would recommend putting :hover on the element that will change, or a close parent element.

As for transitioning, that can be added separately like this:
```
img {
  transition: opacity 0.2s ease;
}
```
Now whenever the image’s opacity value is changed (which it will be when hovered over), it will transition to the new opacity value over 0.2 seconds. “Ease” is the term for a linear transition, but there are other values you can use there as well to customize the animation.
Thread Starter samtazbu
(@samtazbu)

10 years ago

Thanks Ben for the precise explanation…! Let me try these and I’ll let you know if I come across some hurdles. 🙂
Thread Starter samtazbu
(@samtazbu)

10 years ago
Hi Ben,

I tried to play a bit with your codes, but not yet reaching what I am looking for.

A few things I figured:
1. I added a specific class before a: in the css, so that it does not apply to all links.
2. By property: new-value; do you mean to actually place this tag literally, along with something else perhaps, or are you referring to the set of new tags to be placed instead, to qualify what should be displayed on hover? I thought it may be the latter.
3. Should I also add a css for that specific class, when in normal (not hover)? I tried either case, and there is no significative change.
I borrowed the following set of tags from another online source, for hover effects. Perhaps there is something wrong with them.

So here is how my css looks like:
```
.hv a:hover img {
  display: block;
  width: 569px;
  height: 285px;
  background: url('http://www.samvriti.com/wp-content/uploads/2016/05/urge-trans-1024x512.png') bottom;
  transition: opacity 0.2s ease;
}
```
I thought these would be the essential bits of information required to parameter the hover effect desired.

Here is how my html looks like:

<a href="http://www.samvriti.com/2016/04/28/urge/" class="hv"><img class="aligncenter size-large wp-image-2215" src="http://www.samvriti.com/wp-content/uploads/2016/04/urge-1024x512.png" alt="urge" width="569" height="285" /></a>

Would be great if you could have a quick look and let me know if you see a mistake somewhere.

Thanks a lot!

Samuel
Theme Author Ben Sibley
(@bensibley)

10 years ago
Okay cool there’s a few adjustments to make to this.

First, since the “hv” class is on the link, you can apply the hover selector directly to it like this.

.hv:hover

The current CSS won’t work because it says to target a link contained in the .hv element, but there is not another link within it.

Next, you want to style the image initially before there is an active hover state, so the CSS can start like this:
```
.hv img {
  display: block;
  width: 569px;
  height: 285px;
  background: url('http://www.samvriti.com/wp-content/uploads/2016/05/urge-trans-1024x512.png') bottom;
  transition: opacity 0.2s ease;
}
```
Now the image will be styled like this immediately.

Lastly, the hover effect can be added:
```
.hv:hover img {
  opacity: 0.3
}
```
This says to reduce the opacity of any image in an “hv” element to 30% when the “hv” element is hovered over. Because the image has a transition property, the browser knows to transition the image to 30% opacity over 0.2 seconds.

You can add any kind of effect you want – I’m just using opacity as an example.

Does that help?
Thread Starter samtazbu
(@samtazbu)

9 years, 11 months ago

Hi Ben,

I haven’t been able to apply these CSS+html codes successfully so far, but writing the other response in the forum this morning, I realised one thing:

In the link I shared there (http://www.lilafoundation.in/scu-tabs-images/), you could see that the images in the html table were shrinking properly on reduction of the screen width, even though I also applied that hover plugin of mine there.

This is the behaviour that appeared “blocked” on my other website where I am using your theme: http://www.samvriti.com/writer-in-progress/ The images just keep their main size there, so for instance here a smartphone screen would only see displayed the images on the left column.

I had been thinking that it must be the hover plugin that blocks the html table+image size responsiveness on smaller screens. But the first link above shows that the hover plugin does not “freeze” the image in their set size as per the html code: they are responsive just like anything else.

Could that mean that there may be a small part of the code of Tracks somewhere which unintentionally blocks the responsive behaviour of a function such as that of the hover shortcode placed in a html table…?

Let me know if you think there is something there.

I hope this is broadly clear – let me know otherwise and I’ll explain a bit more.

Thanks a lot for the time!

Samuel
Theme Author Ben Sibley
(@bensibley)

9 years, 11 months ago
Okay I see what’s happening.

The width for the images isn’t being controlled, so it’s using the inline CSS WordPress automatically adds to the images when inserted. We can override that like this:
```
.entry-content table img {
  width: 100%;
}
```
That will make sure the images always fill the width of their parent td elements without ever expanding wider.
Thread Starter samtazbu
(@samtazbu)

9 years, 11 months ago

Super!

My worry is appeased. Thanks a lot Ben! It is fixed now.
Thread Starter samtazbu
(@samtazbu)

9 years, 11 months ago
Hi Ben,

Small problem in fact.

The addition of

width: 100%;

in the code that I already had in place:
```
.entry-content table img {
  margin: 0 !important;
  display: block;
}
```
creates an unwanted behaviour on another kind of element – in particular the quotation marks images in the pull-quotes zones, which then appear hugely over-sized – see for example where they should appear here : http://www.samvriti.com/2013/12/06/conclusion-on-the-dialogues-of-philosophy-and-science/

So I kept the .entry-content table img as such, and tried to further specify another one in which I would add the width: 100%; line, and apply this specific code only to the table of that page for which I need the responsive behaviour.

I tried adding the following CSS code:
```
.entry-content table .flex-images img {
  margin: 0 !important;
  display: block;
  width: 100%;
}
```
I also tried placing .flex-images before table on the line… But no effect on the page I am interested in (http://www.samvriti.com/writer-in-progress/). In the html of the latter, I added class="flex-images" in <table>.

Where is my mistake? 🙂

Thanks !

Samuel
Theme Author Ben Sibley
(@bensibley)

9 years, 11 months ago
Very close!

The flex-images class is on the table element, so you can use the CSS like this:
```
.entry-content table.flex-images img {
  margin: 0 !important;
  display: block;
  width: 100%;
}
```
Alternatively, you can use this CSS instead if you think you may use the flex-images class on non-table elements in the future:
```
.entry-content .flex-images img {
  margin: 0 !important;
  display: block;
  width: 100%;
}
```
Thread Starter samtazbu
(@samtazbu)

9 years, 11 months ago

Great! Happy that I learnt a bit more today 🙂 Thanks one more time!

Theme Author Ben Sibley
(@bensibley)

9 years, 11 months ago

Sure thing 🙂

Viewing 13 replies - 16 through 28 (of 28 total)

← 1 2

The topic ‘Background colour’ is closed to new replies.