Finally success!

.gast_sort {
    position: relative; 
}

.gast_sort .grid-image {
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
}

.gast_sort .grid-image::before {
    content: 'Gast'; /
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-color: rgba(218, 218, 33, 0.5); 
    color: #ffffff; 
    padding: 5px 10px; 
    box-sizing: border-box;
    font-weight: bold;
    font-size: 24px; 
    z-index: 10; 
    text-align: center; 
}

I managed to add a border around the whole entry, but I cant get a label to show up on the image.

Sounds easy enough!
I added a portfolio category ‘Gast’ and added the following function to ad a custom class to the categorized portfolios, but I cant seem to get the banner to show up.

I added this to functions.php of the child theme:

function add_custom_category_class($classes) {
    if (is_category('378')) {
        $classes[] = 'category-378';
    }
    return $classes;
}
add_filter('body_class', 'add_custom_category_class');

and this to my css:

.category-378 .grid-entry .inner-entry {
  position: relative;
}

.category-378 .grid-entry .inner-entry::before {
  content: 'Gast';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

height: 50px;
background-color: rgba(255, 0, 0, 0.8);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
transform: rotate(-45deg);
transform-origin: top left;
z-index: 1;
}

Thank you.
I am a bit stumped. I thought it is a quite easy fix, but I run into problems.

My idea is to first figure out how to get anything shown on top of the image. Lets say ‘Test’ and then when that works make it so that it only displays when the portfolio item has a certain attribute. But I am already struggling to get “test” to show up.

Here is the code I found to change:

$image = get_the_post_thumbnail( $the_id, $image_size, $image_attrs );
                    if( ! empty( $image ) )
                    {
                        $output .= '<div class="av_table_col portfolio-grid-image">';
                        $output .= "<{$link_markup[0]} data-rel='grid-" . avia_post_grid::$grid . "' class='grid-image avia-hover-fx'>{$custom_overlay} {$image}</{$link_markup[1]}>";
                        $output .= '</div>';
                    }
                    $output .= '<footer class="entry-footer"></footer>';
                    $output .= '</article>';
                    $output .= '</div>';

And here is the code I change it to:

$image = get_the_post_thumbnail($the_id, $image_size, $image_attrs);
if (!empty($image)) {
    $output .= '<div class="av_table_col portfolio-grid-image">';
    $output .= "<{$link_markup[0]} data-rel='grid-" . avia_post_grid::$grid . "' class='grid-image avia-hover-fx'>";
    $output .= "{$custom_overlay} {$image}";
    $output .= "<div class='overlay-text'>test</div>"; // Add this line for the overlay
    $output .= "</{$link_markup[1]}>";
    $output .= '</div>';
}
$output .= '<footer class="entry-footer"></footer>';
$output .= '</article>';
$output .= '</div>';

I also added the following passage to my style.css

.grid-image {
    position: relative; 
    display: inline-block;
}

.grid-image img {
    display: block; 
    width: 100%;
    height: auto;
}

.overlay-text {
    position: absolute;
    bottom: 10px;
    left: 10px; 
    background-color: rgba(255, 255, 255, 0.7); 
    color: #dada21; 
    padding: 5px 10px; 
    border-radius: 5px; 
    font-size: 16px; 
    font-weight: bold; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

Unfortunately I dont get the text to show up.
Where is my mistake?

Thank you! Very helpful.

Figured it out – I switched debug mode on and voila

Resolved:

 elseif ( the_category_ID(ID) ) {
		$logo = "URL_to_logo.png";  
	}

• This reply was modified 1 year, 5 months ago by fabienneRedUmb.

Thank you for your answer. I realized I haven’t formulated the questions clearly enough.
The backgroundpicture you found was placed intentionally via the Enfold Option to add a picture to the body background in the theme options.
I would very much like to keep it on ALL pages, BUT the single one I posted you the link to.
How would I adress the picture in such a way that I can remove it only from the first page?

Thank you.

// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
$icons[‘twitch’] = array( ‘font’ =>’fontello’, ‘icon’ => ‘\uf1e8’);
return $icons;
}
add_filter(‘avf_default_icons’,’avia_add_custom_icon’, 10, 1);

// Add new icon as an option for social icons
function avia_add_custom_social_icon($icons) {
$icons[‘Twitch’] = ‘twitch’;
return $icons;
}
add_filter(‘avf_social_icons_options’,’avia_add_custom_social_icon’, 10, 1);`

Nevermind, I found the culprit, I added a slash where a slash wasnt needed.

Thank you, resolved!

• This reply was modified 3 years, 9 months ago by fabienneRedUmb.

I renamed the icon to the code to make it work. whenever I try another name than ue800 I get the same error.

Everything works fine with any other browser/OS – its just that combination. how would I access the console from Safari on Mac OS? I have no idea about that and my colleague is a tech noob

Its Ok. We just learned how to clear the browser cache and it magicly works now *rollseye*