Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
so I have come across an upload template I can use for my site, however I have absolutely no idea on where to start. I want the the template that I have (shown below) to be exactly like it is but on the site and fully functional, how would I do this?
Thanks for any help!
EDIT: This is done by using simple css styles, for example, to create a button like the "done" button in the image below, we would simply create the shape first,
background-color: #000; /*change this to a color of your liking*/
width: 100px;
height: 70px;
this will create the rectangle like figure that we would want.
Now, we can create the cornered edges by applying these;
border-radius: 2px; /*change this to your liking*/
And that's how to create a button similar to the ones below
You should strip the complete image in very tiny parts. For example; the cancel button should be split in a 1px,1px square (repeat it in the css) and convert it to .PNG or if possible take only the css from it, right click on the layer -> copy css.
To avoid high loading or huge broadband usage, you should not take the whole image and put it on your website. This will also not be responsive friendly, if you would like to make it responsive.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I need help with my Wordpress website. Theme, which I am currently using, automatically makes background images dark (in elements with text and button). With bright pictures it's ok, but with dark ones it looks horrible. How to find the stylesheet with the corresponding css and how to make it less dark? It's the same situation as in the demo here: Total Vanilla theme demo
You just need to inspect the image and you will jump to the right html element. In your case it's this element that cause the dark effect:
<span class="wpex-bg-overlay color" style="background-color:#383d47;opacity:0.8;" data-style="background-color:#383d47;opacity:0.8;"></span>
To quickly mask all of them you can use this css:
.wpex-bg-overlay {
display: none;
}
Open your website in the browser and press F12 to open the inspector. There you have every piece of code of your website including the CSS files (which will be in the header with a link to a file ending with .css.
in your case:
https://total.wpexplorer.com/vanilla/wp-content/themes/Total/style.css?ver=4.9.9.1
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I want to make it hard for the viewers to copy the text; On a website, they put every word in a span tag so it would be harder to copy it from the page source and I wanted to know how to do that easily.
Is there any other similar methods?
You can't really make text not copyable if you show it. You can make it a little hard tho.
document.addEventListener('contextmenu', event => event.preventDefault());
.donottouch {
user-select: none;
}
<div class="donottouch">
text
</div>
<img src="http://www.placekitten.com/200/300" width="200px" height="300px"/>
If you really want to make it hard save the text as a picture and add that to the page instead. Then you can't copy the content by inspecting the html. To make it a little harder you can disable rightclicks on a page with document.addEventListener('contextmenu', event => event.preventDefault()); making it harder to rightclick the image and save as. You can still grab the image from the html source, and open it in a new window.
So to sum up there is no way to make content on your site 100% noncopyable, you can always grab content from a public site.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Is there any way to make the background as following image.
Should I use to three div classes to create this kind of background. I have no clear idea. I tried to find a way from google. But I couldn't. Please help me.
You can use a single image as the background or you can use say two images as a background - top and then bottom. the second way maybe better for a responsive layout but i dont know enough details to be able to say either way.
Using two background images would look something like this:
.yourclass {
background-image:url(yourimage.png), url(yourotherimage.png);
background-position:top left, bottom right;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Basically I am working on some practices since last week to start learning html and css, and I wanted to create a table of sorts to display items with the option to see more info and take/buy it. I was thinking in adding some background icons or image hence the strange looking table.
My question is. Can something like that be styled or would a normal table be better? To illustrate my point I did a mockup of sorts.
Oh! And as not to make another question just for that, can a dropdown list be made to have checkboxs without using jQuery? I'm afraid that is completely out of my reach with my current knowledge.
http://i59.tinypic.com/25z47dh.png
Thanks a lot in advance
Best Wishes
You have a few options:
You may use display: table and assign table 'rows' and 'columns' on div tags.
Or
You may use float: left which will line everything like a table and be more responsive.
Or
You may use display: inline-block which will behave a lot like the floats except you get a little bit more control on box height.
There is no correct answer here but my preference is with inline-block since browser support tends to be superior than floats while keeping everything responsive.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
I have just started practicing converting PSD's to HTML/CSS. But sometimes you see PSD's and it just seems impossible to craft using html and css.
Like the one here :
http://i.stack.imgur.com/rx0dl.jpg
Thanks alot
The way you should approach this is the same as you would approach any other PSD to HTML, divide it in blocks in your head and start from the top.
Here I made a very rough example of how you could divide this:
http://i.imgur.com/glZJ5.jpg
Use grid lines in photoshop to divide your image in different sections and create slices from there. You can even export to html once you've done that and it will create the css styles required too.
You can find a video explaining how to it here:
http://www.youtube.com/watch?v=DVfxe4pqvo8
Well, start with the basics:
A central content container. Unfortunately, images only describe the layout with one particular screen resolution, but it looks like the designer wanted a centered element with fixed with, probably 960px.
In that container, two headers. You can use the border-radius CSS property to make borders round, but you'll probably need some background images for some icons.
Add the example text, unstyled so far.
Add the front image. You can probably crop it in Photoshop.