Member Avatar for amit.hak50

I want to Build something very similar to the blue box on the page linked below.


on my website: on all the products page like this

would I want image or it is a box I can create via css


Thanks

  • 3 Contributors
  • 3 Replies
  • 80 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by JoshJ47

Dani AI

Generated

— the blue area on the example is an inner container, not a page-wide background. was right that CSS can do this; was right to suggest wrapping the specific block. The trick is to wrap only the bits you want styled and give that wrapper its own class. That keeps the rest of #content untouched.

Add a wrapper around the product meta/description in the post or template, then style that class in your theme stylesheet (or Thesis custom CSS). A compact, responsive example:

.product-bluebox {
  display: inline-block;
  max-width: 640px;
  padding: 14px 18px;
  margin: 0 0 18px 0;
  background: linear-gradient(#2e77c9,#1c5aa3);
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.08);
}

If the blue area still stretches full width, inspect the DOM to confirm which element you targeted; many themes wrap content in 100% blocks. To limit styling to product pages only, scope the selector with a body class (for example body.postid-N .product-bluebox) or add a product-specific class in your template. For rounded corners and modern CSS properties see the MDN docs on border-radius (border-radius (MDN)). Check contrast for readability and avoid editing core theme files—use the theme/custom CSS panel or a child stylesheet so updates do not overwrite your changes.

Recommended Answers

All 3 Replies

Member Avatar for Member #334542

You can simply create boxes in css.

Member Avatar for amit.hak50

can you visit the link ..I want on that website ..it is on Thesis 1.7 ..I am trying

Thesis options >custom file editor>custom.css

#content {background:#67567;}

what is happening is that it makes the whole content area that color but I want only some portion of blue background as you see on the website


on this


any idea ...please help..
Thanks
Amit

Member Avatar for JoshJ47

i would suggest manually making the blue box, just add div tags before and after the area that you want blue. Then just give it an ID, and set the style up like this:
#someId {
background-color: wateverColor;
border:1px solid anotherColor;
}

This gives that effect, and it is very simple, you can choose watever colors you wish

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.