Modifying the border of images in a Weebly gallery

I'm having trouble changing the gallery image borders on Weebly. The client prefers using Weebly for easy backend editing once the design is in place, so I need to work within these parameters. Usually, I can make most code edits easily...but this issue has me stumped!

To modify the border style of regular images on Weebly, you can use the following CSS code snippet. Since the site uses wrapping borders, you will need to change "none":

.wsite-image.wsite-image-border-none img{
    border: 3px solid #000 !important
}

I've been trying different permutations with the gallery code, including classes like galleryimage and galleryimageinnerwrapper, but nothing seems to be working!

You can view the page I'm working on at . Check out the "ION Milling Page" where the gallery I'm tinkering with is located at the bottom of the page.

jquerycssimage-galleryweebly

Answer №1

The border cannot be applied directly to the image due to it being contained within a div with overflow: hidden;. I experimented by adding a border to the container itself using

.galleryImageHolder {
  border: 2px solid red;
}

However, clarity is needed on whether the border should be applied to images on the page or only when displayed in a modal window. Additionally, there is a concern about content being displayed in an iframe. The id indicates preview-iframe, suggesting this might be exclusive to a preview. It's uncertain if the live site will also use iframes for content pulled from another site.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animating a spinning SVG path around its center within a larger rectangular box

Is there a way to rotate a smaller SVG path within a larger rectangle around its own center? The current code rotates the entire space. <animateTransform attributeType="xml" attributeName="transform" type="rotat ...

csssvg

adjust the thumbnail size of the royal slider jquery to automatically fit the content width

Seeking assistance with the royal slider plugin. I am looking to set the width of the thumbnail images to auto, while also having the active pointer (.rsNavItem .rsThumb .rsNavSelected) width adjust dynamically based on the size of the corresponding imag ...

jqueryplugins

What methods can I use to automate the testing of a UI that relies on a lightbox feature?

As a tester utilizing crossbrowsertesting.com, I have come across a situation where developers integrated lightbox into a web app built on the Drupal platform. When users navigate to mysite.com/home and click on a div that triggers a lightbox effect, addit ...

jquerydrupallightboxautomated-tests

Ways to update the div's appearance depending on the current website's domain

There is a piece of code that is shared between two websites, referred to as www.firstsite.com and www.secondsite.com The goal is to conceal a specific div only when the user is on secondsite. The access to the HTML is limited, but there is an option to ...

javascripthtmlcss

At what point does a box create an inline formatting context?

According to my research, I came across a situation where a block formatting context is generated as explained in MDN:Block formatting context. I am curious about the scenarios that lead to the establishment of an inline formatting context within a box. ...

css

Having trouble with a jQuery.validationEngine reference error?

Despite everything being correctly referenced, I am facing difficulties in getting it to function properly. It's strange because it worked once, but the validation message took 10 seconds to appear. After that, without making any changes, I tried agai ...

javascriptjqueryhtmljquery-plugins

Choosing solely the following immediate sibling

After researching various solutions on different platforms for selecting the next sibling, I always encounter some kind of issue when implementing the suggested code. Here is the current structure I have: <div class="article" id="onea"> &l ...

jqueryjquery-selectors

The page fades in as soon as it is loaded thanks to the "

I am interested in creating a unique effect where different classes fade in on page load. Check out this webpage for reference. The linked page showcases squares in various shades of grey and color, with the desire to have them fade in at different inter ...

cssclassfadeinonload

How can I prevent a child div from activating the hover effect on its parent div?

I am currently exploring how to create a child element with position: absolute that is placed outside of its parent element without triggering the parent's :hover effect. Despite the parent having a hover effect, the child elements will still activat ...

htmlcssinheritancehover

Troubleshooting WordPress <?php body_class(); ?> Problem

After successfully integrating my theme into WordPress, I decided to add WooCommerce to create a shop. However, I encountered an issue where the styles of WooCommerce were not appearing properly. Upon researching, I discovered that the root cause was the a ...

phphtmlcsswordpress

What are some strategies for keeping the focus state on the parent item in a dropdown menu?

When I interact with the dropdown menu in my navigation bar, the color changes for the child items. How can I make sure that the parent item maintains the same colored background even after clicking elsewhere on the page? To better understand the issue, i ...

htmlcss

Is it possible to use JavaScript to forcefully transition a CSS keyframe animation to its end state?

One dilemma I am facing involves CSS keyframe animations triggered by scroll behavior. When users scroll too quickly, I would like JavaScript to help send some of the animations to their 'finished/final' state, especially since the animations bui ...

javascriptcssanimationkeyframe

Traversing tables with JQuery's nextUntil function

I have a calendar table where I need to highlight the range from the pickup date, maybe 10 Feb, to the set date of 20 Feb. <tr class="rd-days-row"> <td class="rd-day-body rd-day-disabled">09</td> <td class="rd-day-body">10& ...

jqueryhtml

Is there a way to set a value within a jQuery function, and then invoke another function to utilize that value?

Suppose I have a function called isPercentage, which utilizes a value that is defined within the function it's being called in: isPercentage = function(){ if (value < 1){ value = value * 100; console.log(value); ...

javascriptjquery

Resize images in PHP and MySQL with precision without distorting the image

I'm looking for a solution to resize images on upload without deforming them. The current code uploads the image and stores it in the database, but I need to add resizing functionality. I'd prefer not to use JavaScript, but if necessary, please i ...

phphtmlmysqlcssimage

Access the Windows directory through a custom HTML link

Currently, I am in the process of creating a personalized "website" that contains a collection of links leading to specific items on my computer. When I click on a link, the folder opens within the browser. Is there a way for these links to open Windows Ex ...

javascriptjqueryhtml

Tips for keeping notification icons in the upper right corner of the box?

I am facing an issue with absolute positioning where the notification icons I've positioned to the top-right corner of a box are moving away when the screen size changes. Desired appearance of the image Actual appearance when screen size is adjusted ...

javascriptcssreactjsstyled-components

The Chartjs bar graph fails to display data upon initial page load

My HTML page includes a bar chart created using the ChartJS library. However, upon loading the page, the chart appears empty without displaying the data I provided and without rendering the bars. It only responds after clicking on the legend - first displa ...

javascripthtmljquerychart.js

Displaying a box with a question mark using Glyphicon and Font Awesome icons

I'm having a problem with my website not displaying the Glyphicons or Font Awesome Icons. When I enter the code, it shows up like this: http://prntscr.com/8qwwmd. This is the first time I've encountered this issue and it's only affecting som ...

htmlcssfont-awesomeglyphicons

Unveiling the Quirk of Foundation 5: Grid Encounters a Popping

Recently, I encountered an issue with Foundation 5. Whenever I attempt to apply the "position:fixed" property on a "div" element that is part of the Foundation Grid, it causes the div to break out of the grid and align itself with the left edge of the ro ...

csszurb-foundation