Im working on this website www.theartisanscorner.com.au/index.php and i am very new to Opencart. I have been really trying to work this out, and really need some help
The text is too close on all pages in regards to the edge of the pages. I have changed the width of div container, but it just stretches it out.
I want to use an image as a border for all pages on the div container on all pages. I can add border-style: solid; but i would like an image instead.
container {
background: none repeat scroll 0 0 #FCE3CE;
margin-left: auto;
margin-right: auto;
width: 980px;
}
On the homepage slideshow i want to have a border around it (if possible an image border)
There is white on the footer images, is this due to the size of the images i have uploaded?
Many thanks,
Deryn
The text is too close on all pages in regards to the edge of the pages. I have changed the width of div container, but it just stretches it out.
You can change width: 980px; in /catalog/view/theme/your-theme-name/stylesheet/stylesheet.css but as usual it is 980 px because some users have 1024px width in their browsers.
I want to use an image as a border for all pages on the div container on all pages. I can add border-style: solid; but i would like an image instead.
Use css rule background-image.
On the homepage slideshow i want to have a border around it (if possible an image border)
Yes, it is possible with background-image
There is white on the footer images, is this due to the size of the images i have uploaded?
Maybe it is because you have something after footer? As default there is a message "Powered by Opencart" and due to this message, there is a white space after footer.
Related
I've recently started a new job at an Audio Visual company and they've asked me to develop an application that allows users (without authentication) to upload images to a display page and have it automatically scroll through.
I chose the only carousel I've ever found helpful but my issue is that the landscape images are not vertically aligned with the portrait images.
My code is set up so that the uploaded image is sent through to a database and then retrieved to display automatically in the carousel so each image has it's own individual div tag.
The page itself won't load without database connection and doesn't work in JSFiddle because of the PHP elements within.
Also here are screenshots of my issue:
Image 1 displaying portrait image at full height
Image 2 displaying landscape image at top of the page
I want image 2 to display in the center of the page and everywhere I look for the correct information I don't seem to find what I'm looking for.
Please help me, I would very much appreciate it!
AlexJamesDean.
You can add position to image div
.autoplay{position: relative;}
#img_div {
width: auto;
height: auto;
postion: absolute;
top: 50%;
transfrom: translateY(-50%);
}
I'm having trouble adjusting the size of the play button on an embedded Kultura video. When I embed a video within a smaller container or screen size, the play button is so large that it nearly covers the entire thumbnail on any state. (see attachment) Does anyone know how I can adjust the button's size?
Read about Player Skin Overrides and about Player States.
Essentially, you would need to add custom CSS override, and include something like the below example;
.size-tiny .largePlayBtn {
width: 8px !important;
height: 10px !important;
}
i am making a group type page thing, and i have a div on the side of my webpage, which gets its members from the database, and so when there is like 5 members showing, i would like no scrollbars on the side but if the box fills up say with 15 members, i would like scrollbars to appear in the div box. I was wondering how is that achieved with html, css or php (simplest way possible).
Whatever DIV you are using to contain this content make sure you change the overflow attribute to auto and then it is just a matter of making the height of the DIV tall enough so that it won't show a scroll bar when 5 peoples names are in the box, make it so when about 15 or so names are in the box it will be full therefore the scroll bar will automatically appear...
It should look something like this:
.currentmembers{
width: 100px;
height: 500px;
overflow: auto;
}
Using overflow: scroll; will also leave a horizontal scroll bar which I'm assuming you don't want so overflow: auto; will be the most appropriate. Also the height of your DIV will depend on the font sizes that the names will be in, the smaller the font size the more you will be able to fit in that one box before the scroll attribute comes into play.
I am working on a database project and have hit a cosmetic snag.
I have a database that loads profiles into arrays for displaying using a php while loop, so it is set to display the content of a database and allow for adding with no additional coding.
Four of the fields are picture upload locations, as part of the upload process is the ability to upload up to 4 different images, which are then saved in a directory and their path saved to the profile database.
Here is my problem however, not all the images are the same size (as in width and height). I have my code set up designating a specific area to an image to stop it filling up the screen, but rather then scale it, the code simply squishes or stretches the dimensions. So a 80*120 image being resized is just being distorted.
This is the section of code responsible for calling the image into the field.
<div id="wb_Text2" style="position:absolute;left:10px;top:<?php echo $imagepix ? >;width:100px;height:120px;z-index:5;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:15px;"><img src="uploads/<?php echo $productpicture ?>" alt="" style="width:70px;height:120px;" ></span></div>
The first section is a cosmetic alignment of the container, the second imports the image and formats it accordingly.
I am using the style= section for sizing but its obviously the wrong approach and I cant find any useful info on what exactly I'm looking for as half the battle is knowing what to ask!
The end result is to be able to scale an image so various requirements by simply changing a ratio on the output field such as altering style to style="width:140px;height:240px
I hope this makes sense and someone has some insight.
Thanks
You could use max-height and max-width instead of height and width, and apply a black background to the image container. You would also have to center the image in the container both horizontally and vertically. Do this by setting the line-height of the container equal to the height and using text-align.
<div id="image-container" style="width: 70px; height: 120px; text-align: center; line-height: 120px; background: black;">
<img src="image.jpeg" style="max-height:120px; max-width: 70px; display: inline-block;" />
</div>
Of course you should put the style tags into a stylesheet instead.
If you would rather crop the image instead of having it fit in with a black background, let me know because this can also be done with CSS and maybe a bit of JavaScript.
I have a php script that returns a list of small images (like thumbprints) that are displayed based on search criteria.
I'd like these images to be displayed on after another until they reach approx 45% across the screen and then if there are more images than will fit in the space, the images continue on to a new line.
I have used CSS to set the following within a div.
.example {
Float: left;
Width: 45%;
}
But the images continue beyond the 45%.
If I used the style overlap:scroll; or overlap:hidden, the images stop at 45% and either you can scroll to see the others or they are hidden.
How can I make the images continue onto a new 'line'.
I've tried word-wrap without success.
Thanks for your help.
the way you describe it it should work just fine.
I made a jsfiddle DEMO
images are by default displayed as inline elements, if the elements are not images try using display:inline on them or display:inline-block.
Try adding display:inline-block; to the element.