cancel
Showing results for 
Search instead for 
Did you mean: 

Modifying a jsfiddle to customize theme. Images + landing pages + Youtube embed in css grid

Modifying a jsfiddle to customize theme. Images + landing pages + Youtube embed in css grid

Greetings everyone!

I'm trying to work on this Jsfiddle here.

My aim is to customize the code for a theme extension, i'm trying to use it in a .less modification for a custom theme. If i just copy the code as it is, it will use outside resources and show the same things. However, by simply modifying the urls with my own, it doesn't work, i've tried. I've also had a difficult time finding the proper path for images to the child-theme, that's why i moved them in the media folder of the parent-theme.

I will copy / paste the _extend.less file below. Please be so kind, look at it and tell me what i'm doing wrong. Please also help with the youtube embedding that i want to integrate into the last part of the grid. One example should put me on the right path! I would really like the youtube/vimeo embed to scalate correctly in the space allotted by the css code.

I don't have a developing hosting service, could you teach me how to "label" this site as a "demo"? Since i'm barely starting to work with it.

Thank you very much for your patience and support!

 

 

 

/* Latest compiled and minified CSS included as External Resource*/


body {
  color: #777;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  font-size: 1.3rem;
}



div {
  display: block;
}

.b-padding {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.shop-cats-box {
  background-image: url(http://www.drapaje.ro/pub/media/wysiwyg/smartwave/porto/homepage/06/slider/Pavilion-design-outdoor-furniture-canopy-sofa-Talazurile.jpg);
  float: left;
  position: relative;
  width: 50%;
  padding-bottom: 32.5%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.square {
    float: left;
    position: relative;
    width: 50%;
    padding-bottom: 32.5%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.image-large {
    border: 1px solid #000;
}

.img_1-1 {
  background-image: url(http://www.drapaje.ro/pub/media/wysiwyg/smartwave/porto/homepage/06/slider/piscina_bar_de_zi_silly_goose%20(1).jpg);
}

.img_1-1,
.img_1-2,
.img_7-1,
.img_7-2 {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}

.img_1-2 {
  background-image: url(http://www.drapaje.ro/pub/media/wysiwyg/smartwave/porto/homepage/06/slider/design-outdoor-mobilier-pat_de_zi_basic_Talazurile.jpg);
}

.img_2-1 {
  background-image: url(http://www.drapaje.ro/pub/media/wysiwyg/smartwave/porto/homepage/06/slider/design-outdoor-mobilier_luminat-sezlong_canapea_Talazurile.jpg);
}

.img_2-2 {
  background-image: url(<iframe width="640" height="360" src="https://www.youtube.com/embed/Tdb_vxoUD4w" frameborder="0" allowfullscreen></iframe>);
}


.text {
    background: rgba(255,255,255,0.5);
    position: absolute;
    top: 50%;
    left: 40%;
    padding: 1rem;
    transform: translateY(-50%);
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: normal;
    font-size: 2vmin;
    color: black;
    font-weight: 400;
}