CSS

41K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Share tech news, updates, or what's on your mind.

Sign up to Post

Page title shows up on some pages but not all pages. How can I make them show up on all pages or none at all?
0
Cloud Class® Course: Amazon Web Services - Basic
LVL 12
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

I want to add a link in my footer but it prints out the <a href=""> in the footer. How can I add a link in my footer?

This is the contents of my footer.php file:
<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the #content div and all content after
 *
 * @package wpre
 */
?>

	</div><!-- #content -->

	<?php get_sidebar('footer'); ?>

	<footer id="colophon" class="site-footer" role="contentinfo">
		<div class="site-info container">
			
			<span class="sep">
                			<?php echo ( get_theme_mod('wpre_footer_text') == '' ) ? ('&copy; '.date_i18n(__('Y','wp-real-estate')).' '.get_bloginfo('name').__('. All Rights Reserved. ','wp-real-estate')) : esc_html( get_theme_mod('wpre_footer_text') ); ?>
            </span>
		</div><!-- .site-info -->
	</footer><!-- #colophon -->
	
</div><!-- #page -->


<?php wp_footer(); ?>

</body>
</html>

Open in new window

How can I add a link in the file?
0
There is a huge space between the header and page title. I've tried adding the following css but nothing helps. How can I get rid of the space?
.site-inner {
    margin-top: 0 !important;
	}	


.site-header {
    padding: 25px 0;
}

.page-header {
    margin: 0 auto;
    min-height: 1px;
} 
/* Hide title on About Us page */
.page-id-our-process .main-title__primary { display: none; }
body.page .entry-header .entry-title {
margin-bottom: 10px;
}
.middle-align h1 {
margin: 0;
padding: 0;

Open in new window

0
I have a div and on its blank state, I will like to hide it. However, there are spaces in the div and
div:empty { display: none;}

Open in new window

is not working.

Do you have any suggestions on how to hide the div on its empty/blank state?

Thank you all in advance.
0
I am going through the process of trying to optimise various websites to improve speed. I am testing on sites like GT Metrix, etc.

The main issue I have is regarding combining CSS & JS into one file and minifying. I understand what I need to do, but it creates a nightmare for me as far as ongoing future development and updates in concerned. i.e. My development site has them in separate files for ease of understand and updating, then it makes it quite time consuming each time as I need to re-combine each time a small update has been done to one of these files. Some of my sites have 15+ separate CSS or JS files.

I would be interested to see how everyone else deals with this process. Is there an easy automated way to get several css & js files into one file?

The sites are generally bespoke sites so not looking for Wordpress plugins.
0
Hi folks

I have created a video grid and wish to add a footer div to the bottom of each iframe.  However the footer I have just overwrites the bottom of the iframe.  Any ideas how I can atatch to each video iframe below the video?

Thanks

HTML
 <div class="video-grid">
    <div class="video-item">
      <div class="video-wrap">
        <iframe src="https://player.vimeo.com/video/12112529?portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        <div class="footer" <p>This is where the title will go</p>
        </div>
        
        </div>
      </div>
    <div class="video-item">
      <div class="video-wrap">
        <iframe src="https://player.vimeo.com/video/61487989?portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    
      </div>
    </div>
    <div class="video-item">
      <div class="video-wrap">
        <iframe src="https://player.vimeo.com/video/21081887?portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>
    </div>
  </div>

Open in new window





CSS

.video-item {
  overflow: hidden;
}

.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
}

.video-item iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 10px;

}

.video-item img {
  

Open in new window

0
Hello Experts!

Something is preventing checkbox and radio to display when this part of my Bootstrap is added. When I remove this part, those inputs show with default style.

Can you help me fix it?

See attached, please.
bootstrap_bug.txt
0
I would like to create a "sticky" header nav bar that will always be on the top of the page, when you scroll.

But I want the nav bar to animate by shrinking a little bit. Here is a perfect example of exacty what I am tring to do:

https://cmitsolutions.com/scottsdale-south/

I would like to have it work just like that, where the phone number and such reamains until you scroll, and then disappears and the menu logo actually shrinks a little.

Can anyone help me out with a tutorial or short example? I love this effect, and really want to learn it for my next project.

Thank you!
0
Hi I have this page where a background image blurs on Scroll (transition to a different image) + Simple Parallax. It works great in Chrome, but not working as expected in IE11. It's not broken, per se, just not working as intended.
0
Hi everybody.
I really don't understand how to change the overlay background color in this template: https://colorlib.com/preview/#amado.
I mean: if you hover the mouse on products, a dark semi-transparent overlay appears. The template uses a scss file. In the index a fiola called style.css is linked, but that file is empty and with developer tools I see all styles are set in  style.scss, but I'm not able to find the value that I have to change. I confess I'm totally new to sass, scss.
I post here the scss file:
@import 'theme_color';
@import 'variables';
@import 'mixin';
@import 'responsive';

/* [Master Stylesheet v-1.0.0] */

/* :: :: 1.0 Import Fonts */

@font-face {
    font-family: 'helveticaneuebold';
    src: url('../fonts/helvetica_neu_bold-webfont.woff2') format('woff2'),
    url('../fonts/helvetica_neu_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'helveticaneuemedium';
    src: url('../fonts/helveticaneue_medium-webfont.woff2') format('woff2'),
    url('../fonts/helveticaneue_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* :: 2.0 Import All CSS */

@import '../css/bootstrap.min.css';
@import '../css/owl.carousel.css';
@import '../css/animate.css';
@import '../css/magnific-popup.css';
@import '../css/jquery-ui.min.css';
@import '../css/nice-select.css';
@import '../css/font-awesome.min.css';

Open in new window

0
Cloud Class® Course: C++ 11 Fundamentals
LVL 12
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

I am trying to export the div content to PDF using jsPDF

function demoFromHTML() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    // source can be HTML-formatted string, or a reference
    // to an actual DOM element from which the text will be scraped.
    source = $('#customers')[0];

    // we support special element handlers. Register them with jQuery-style 
    // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
    // There is no support for any other type of selectors 
    // (class, of compound) at this time.
    specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        '#bypassme': function (element, renderer) {
            // true = "handled elsewhere, bypass text extraction"
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    };
    // all coords and widths are in jsPDF instance's declared units
    // 'inches' in this case
    pdf.fromHTML(
    source, // HTML string or DOM elem ref.
    margins.left, // x coord
    margins.top, { // y coord
        'width': margins.width, // max width of content on PDF
        'elementHandlers': specialElementHandlers
    },

    function (dispose) {
        // dispose: object with X, Y of the last line add to the PDF 
        //          this allow the insertion of new lines after html
        pdf.save('Test.pdf');
    }, margins);
}
<script 

Open in new window

0
Hello,
I want to open a modal composed of an iframe full screen.
Any idea on how to achieve that?
0
I'm using a wordpress theme and would like to move the site title line up on the line with the logo and menu. Is there an easy way to do this?
0
From some help here on EE I managed to get a 2 tier accordion working but now I need a third level. The problem is that every 2nd level has the same info for it's third level instead of the actual data associated with the second level.

		$this->db->query("SELECT `edition`, `serial`, `rep`, `prod_name`, `reg_price`, `sale_price`, `end_date`, `purchased`, `first_name`, `last_name`, `voucher_id`, `sp_name`
		FROM `vouchers` AS `v`
		INNER JOIN `bb_products` as `bbp` ON bbp.`prod_id` = v.`product_id`
		INNER JOIN `service_providers` AS `sp` ON sp.`service_provider_id` = v.`sp_id`
		LEFT JOIN `bb_users` as `bbu` ON bbu.`uid` = v.`customer_id`
		WHERE v.`rep` = :sp_id 
		GROUP BY `sp_name`, `prod_name`
		ORDER BY `sp_name`, `prod_name`");
		$this->db->bind(":sp_id", $_SESSION['sp_id']);
		$results = $this->db->resultSet();
		$groupedData = [];

    foreach ($results as $record):

        $key = $record->sp_name;
        $groupedData[$key]['header'] = $record;
		$groupedData[$key]['children'][] = $record;
		$groupedData[$key]['grandchildren'][] = $record;

    endforeach;

		return $groupedData;
		
		return $results;

Open in new window



<div class="container">
	<div class="panel-group" id="accordion">
		<?php foreach($data['voucher_history'] as $group): ?>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
					<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#<?php echo $group['header']->sp_name; ?>">
			

Open in new window

0
I'm trying to get the middle drop-down on my webpage to display like the other 2. For some reason, the middle drop-down looks different,  How could I get it to look like the other 2?

https://cretecarrier.com/
0
I am using bootstrap 4. My bottom footer I am having an issue making it sticky at the bottom.

CSS:
  .footer {
    position: relative;
    bottom: 0;
    height: 60px;
    width: 100%;
    padding-top:20px;
    background-color: #214761;
    color: #FFFFFF;
  }

Open in new window


If I set the position to absolute the footer is at the bottom but longer content will go past the footer.

My page starts with a <nav> ... </nav> followed by a <div class="container"> ... content ... </div> then followed by <footer> ... </footer>
0
I am adding pages to an existing web site. The current site is using it's own CSS. I need to make a checkout form, and I want to use Bootstrap.

When I add Bootstrap, it breaks all kinds of stuff. How can I use Bootstrap on this new page without breaking existing CSS?

Thanks!
0
https://mdbootstrap.com/sections/testimonials-sections/

I want to create pure html Testimonials v.1 from above URL but I do not want to use their plug in. Do you know how i can create the Testimonials v.1 like the one they have?

Thanks
0
I have the following xml input and I want to iterate through each Flight grouped by OanD

<root>
	<Data>
		<Flight OanD="ODC1" CnxxIndicator="Y">
			<Depart>
				<CityCode>MUC</CityCode>
			</Depart>
			<Arrive>
				<CityCode>TXL</CityCode>
			</Arrive>
			<Carrier>
				<AirlineCode>TT</AirlineCode>
				<FlightNumber>2036</FlightNumber>
			</Carrier>
		</Flight>
		<Flight OanD="ODC1">
			<Depart>
				<CityCode>TXL</CityCode>
			</Depart>
			<Arrive>
				<CityCode>FRA</CityCode>
			</Arrive>
			<Carrier>
				<AirlineCode>TT</AirlineCode>
				<FlightNumber>187</FlightNumber>
			</Carrier>
		</Flight>
		<Flight OanD="ODC2">
			<Depart>
				<CityCode>FRA</CityCode>
			</Depart>
			<Arrive>
				<CityCode>MUC</CityCode>
			</Arrive>
			<Carrier>
				<AirlineCode>TT</AirlineCode>
				<FlightNumber>94</FlightNumber>
			</Carrier>
		</Flight>
	</Data>
</root>

Open in new window



The desired output xml :

<Response>
	<OriginDestination>
		<Flight OanD="ODC1" CnxxIndicator="Y">
			<AirlineCode>TT</AirlineCode>
			<FlightNumber>2036</FlightNumber>
			<Departure>
				<AirportCode>MUC</AirportCode>
			</Departure>
			<Arrival>
				<AirportCode>TXL</AirportCode>
			</Arrival>
		</Flight>
		<Flight OanD="ODC1">
			<AirlineCode>TT</AirlineCode>
			<FlightNumber>187</FlightNumber>
			<Departure>
				<AirportCode>TXL</AirportCode>
			</Departure>
			<Arrival>
				<AirportCode>FRA</AirportCode>
			</Arrival>
		</Flight>
	</OriginDestination>
	<OriginDestination>
		<Flight OanD="ODC2">
			<AirlineCode>TT</AirlineCode>
			<FlightNumber>94</FlightNumber>
			<Departure>
				<AirportCode>FRA</AirportCode>
			</Departure>
			<Arrival>
				<AirportCode>MUC</AirportCode>
			</Arrival>
		</Flight>
	</OriginDestination>
</Response>

Open in new window



My current snippet of code is below but it's not building desired results. I tried the Muenchian method to group by but it'd only retrieve unique OanD and not group them so I can get the Flights found within the group.

<xsl:key name="OandD" match="/root/Data/Flight" use="@OanD" />

  
<xsl:apply-templates select="Data"/>


<xsl:template match ="Data">

 <OriginDestination>  
 
         <!--<xsl:for-each select="Flight[generate-id() = generate-id(key('OandD', @OanD))]">-->

       <xsl:for-each select="Flight">    
	   
			//do something
			
	   </xsl:for-each>


 <OriginDestination>  
  
</xsl:template>

	

Open in new window

0
Cloud Class® Course: MCSA MCSE Windows Server 2012
LVL 12
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Hi E's,
I want overlay two images in a responsive project. That not easy when we working with CSS position relative.
So, because that, for overlay two images, one will be a background-image, and other is a normal image inside the div, like you can view here:
<div class="row" style="margin-top: 200px;">
        <div class="col s10 l4 offset-s1 offset-l4" id="fundo" style="background-image: url(imagem/MVC-610X.JPG); max-width: 1024px; max-height: 768px;">
        <img src="imagem/MVC-611X.JPG" class="responsive-img" alt="" style="opacity: 0.5">
        </div>
    </div>

Open in new window

With the above code, I can overlay two images (background and div).
I try to found a solution for animate the background image to opacity 0.
With follow code, I try a solution, but all the elements set to opacity 0, include the image inside the div:
$('#fundo').animate({"opacity": 0}, 5000 );

Open in new window



I know the reason why all the elements set to opacity 0, I try to search a solution in the Internet, and I don't find anything related, so I come to EE's to try to get a solution for:
How I create a Jquery animation from opacity 1 to opacity 0, just for the background image, preserve the image in the div?

The best regards, JC
0
I am trying to do something with ScrollMagic and I'm stuck.

This example on scrollmagic.io shows almost what I want to do:
http://scrollmagic.io/examples/advanced/section_wipes_manual.html

The only thing I would like to add, is the ability to "pause" the scrolling on a given slide (i.e., make it "sticky"). So that as you continue scrolling, the slide stays on your screen for a given number of pixels, then continues on to the next slide.

A good example of what I want is in this example on scrollmagic.io:
http://scrollmagic.io/examples/basic/section_wipes_natural.html

Note that in-between screens 3 and 4 there is a pause. This is achieved by adding margin-bottom to screen 3.

However, using the first example, it doesn't appear that adding margin-bottom achieves the pause, because the animations are built in a different way.

I was hoping someone more familiar with ScrollMagic may have some good advice on how to tweak that example, which will then correspond to exactly what I'm trying to do.

Thank you!
0
CSS Vs Jquery Vs Bootstrap

I have watched few videos about CSS , Jquery , Bootstrap and they all seem  to me like  they are used to design the web page.
However I am not sure if I can use just one of them and will be enough or there are some specific things that can be done by one of them and cannot be done by the other.

Any Expert to explain when  to use one and not the other. Which of them I have to focus on learning that can do more of what is needed in Web Development.
I have not included JavaScript, because I am assuming that one is a Must to know for Wed Dev.

Thanks
0
I am having a VERY tough time with this.  This is a wordpress site.  Its a CSS/PHP issue.  Each entry from DB has a picture, name, title.  I want to line them up left to right. 2 people per row.

Here is the code:
<style>
				.ev-speaker-img {
					max-width: 250px;
				}
				
				.ev-list-row {
    				display: table;
    				width: 100%; /*Optional*/
    				table-layout: fixed; /*Optional*/
    				border-spacing: 10px; /*Optional*/
				}
				.ev-list-column	{
					display: table-cell;
				}
</style>
				<?php if($rows): ?>
					<?php foreach($rows as $row): ?>
					<div class="ev-list-row">
					<div class="ev-list-column">
						<img class="ev-speaker-img" src="<?= $row['speaker_image']; ?>"/><br>
						<?= $row['speaker_name']; ?><br>
						<?= $row['speaker_title']; ?>
					</div>
					</div>
					<?php endforeach; ?>
				<?php endif; ?>

Open in new window


Each entry seems to be its own row, no matter how I configure this from a CSS perspective.  Im out of ideas.
0
Is there a way to have a outside border around the <th> of table, but not
around each cell in the table?
Capture.JPG
0
I'm trying to move a web-app built in html, css and js to Wordpress running the Genesis Theme.
The app uses Leaflet.js to display a map on which the user can navigate and click to perform an action with that place.

In the original web-app, all the css and scripts required were loaded in the header section of the html page. In the Wordpress version they are called from a php file in the plugin which uses
wp_register_script(ScriptName, scriptURL)

Open in new window

and then
wp_enqueue_script(ScriptName)

Open in new window

for each of the scripts.

The Wordpress version is available to view at https://notetheplace.app - if you go there you will see it displays the map OK. But nothing happens when you click on it. looking at the browser console, you will see the error - "leaflet.js?ver=1.3.1:5 Uncaught TypeError: t.addLayer is not a function" - so it appears to be having trouble reaching the leaflet script even though it is loaded when the page loads.

If you look at the page source, you'll see that the actual html for the map section, plus the javascript required to render it, have been embedded after the closing </body> tag.

So I'm obviously doing something wrong...

Can anyone explain to me how I should structure this page as a Child Theme template so that the scripts can be called when the map is clicked?

This is the current structure of the template page. What structure should it have to ensure the html appears within the <body> tags instead of after them... if indeed that is the problem - its likely there may be more than one... can anyone help?


Open in new window

0

CSS

41K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.