Styling rounded buttons with GTK and CSS

In my C++ application, I am attempting to create a rounded button by utilizing an external CSS file.

Although I have successfully achieved a round button, there is still a pesky rectangular border that remains and I am struggling to figure out how to remove it.

Here is the content of the CSS file in question :

GtkButton  {
    -GtkWidget-focus-line-width: 1px; 
    border-width: 1px;
    border-radius: 30px;
    background-image: -gtk-gradient (linear,
        left top,
        left bottom,
        from (@win_bg),
        color-stop (0.5, @win_dark),
        to (@win_bg));
}

NOTE : I have omitted the color definitions for brevity.

c++cssgtk

Answer №1

Currently, I am using the Debian Wheezy operating system which is still in the testing phase. After successfully installing the gtk unico engine by running the command "apt-get install gtk3-engines-unico", and making some modifications to my css, I was able to get rid of the rectangular borders.

GtkButton  {
    engine: unico;
    -GtkWidget-focus-line-width: 1px; 
    border-width: 1px;
    border-radius: 30px;
    background-image: -gtk-gradient (linear,
        left top,
        left bottom,
        from (@win_bg),
        color-stop (0.5, @win_dark),
        to (@win_bg));
}

Answer №2

Forget about manual CSS modifications, it's time to embrace a simpler approach for users who stick to the standard themes. Rather than tweaking individual elements, let's focus on utilizing the existing structure efficiently:

If needed, buttons can be given a round shape by applying the .circular style class.

For example:

gtk_style_context_add_class(
    gtk_widget_get_style_context( GTK_WIDGET(button) ),
    "circular"
);

This method is compatible with both Adwaita and HighContrast, the two standard themes. Keep in mind that when dealing with buttons of varying dimensions, only the corners will become rounded while the rest remains flat, resulting in a rounded rectangle rather than an oval shape.

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

Difficulty Aligning Angular Material Expansion Panel with mat-nav-listI am facing an issue with

Currently, I have implemented a mat-nav-list to showcase the Menu items on my webpage. However, there seems to be an alignment issue with the 4th Menu item which is an Angular Material Expansion control. Refer to the screenshot provided below for clarifica ...

htmlcssangularangular-material

checkbox-activated navigation bar

Struggling to implement a Nav-drawer that should open when a checkbox is selected, everything seems to be set up correctly but the issue arises when it comes to actually opening it. Here is the code snippet: <div class="leftside"> <input typ ...

htmlcssnav

Employ CSS to target the initial and final items within sets of identical elements

I created the following CSS styles: div { width: 300px; text-align: center; } p:not(.vrt) { text-align: left; } p.vrt { writing-mode: vertical-rl; display: inline-block; } div :nth-child(1 of p.vrt) { margin-left: 0; } div :nth-last-child(1 of ...

cssselection

Guide to making a template-based multi-dimensional std::array in C++:

Is it possible to create a multi-dimensional std::array of type Type with known initial constexpr dimensions using smart variadic templates for an "MDA"? The number of dimensions should be variable. I envision being able to write: MDA<int,3,4,5,6> ...

c++arraystemplatesvariadic-templates

What is the best way to adjust viewport settings for child components, ensuring the container size is set to 100vw/100vh for all children

Within my project, I have connected the react-static repository with the react repository using yarn link. "react": "^16.13.1" "react-static": "^6.0.18" I am importing various components from the react-static reposi ...

javascripthtmlcssreactjsviewport-units

Bootstrap grid: Preventing horizontal scrolling when all columns cannot fit in a single row

Why is it that when the column does not fit in one row, instead of showing a horizontal scrollbar, it goes to the bottom? <div class="container-fluid main-container" style="overflow-x: auto; width:600px"> <div class="row mx-5"> < ...

htmlcssbootstrap-4flexbox

Sort the DOM elements in jQuery based on their CSS color property

Displayed on the page below is a list of usernames in a random order. I'm looking to sort them using jQuery in the following sequence: red blue green purple black This is my current progress: <script type="text/javascript"> $(function() { ...

jquerycsssortingcolors

Center-aligned navigation bar with all elements except for one positioned on the right side

Currently, I am attempting to center 4 elements next to each other while having one element float to the right using a flex-based solution. The ideal outcome would be for the floated element to remain in place when resizing the browser, with the other 4 e ...

javascripthtmlcss

Calculating dimensions for parents and their children

Could someone please explain to me why the size of #child is different from that of #parent? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or ...

htmlbordermargincss

Updating the Hero Image

Scenario: In my project directory, under Product -> src -> static -> ostatic [ there are two folders named css and images ] -> images -> where all the images can be found. I am using bootstrap and attempting to set a background-image for j ...

cssdjango

In a React application, adjusting the main container height to 100vh results in the window.scrollY position being set to

I was facing problems with flashing on the Safari/Firefox browsers. By setting the main container height to max-height: 100vh, I managed to resolve the flickering issue. However, I am also looking for a solution to keep track of the window.scrollY positi ...

cssreactjsfirefoxsafariflicker

Reposition various div elements within a static container

Struggling to align div boxes like the image below was exhausting: I attempted fixing it with the code provided in this JSBIN link. How can I resolve the issue and adjust the layout as desired? Any help would be greatly appreciated. Thank you in advance ...

csshtmllayout

The styling options for PHP table are limited

I have been assigned a task for homework that involves connecting a MySQL database to our PHP files and displaying the data in an HTML table. Although I have successfully connected to the database, I am facing difficulties styling the table. All other elem ...

phphtmlcss

How to eliminate looping animations with jQuery

While looping through items, I am encountering an issue where an animation triggers when the loop returns to the first div. I simply need a way to switch between divs without any animations on a set interval. $(document).ready(function () { function s ...

javascriptjqueryhtmlcss

Do double forward-slash comments work in CSS code?

Is using a double-forward slash (//) for single-line comments in CSS considered reliable and supported by mainstream browsers and CSS interpreters according to the specification? ...

csscomments

Select elements in jQuery using both a specific selector and a negative selector

I am currently working with a JQuery function that highlights a specific word and scrolls to it: $('article.node--article p, .video-title').highlightWordAndScroll({ words : search_word, tag : '<span class="found_key ...

javascriptjqueryhtmlcss

How to create a WordPress sidebar that remains fixed while scrolling

I have a WordPress website with a right sidebar that I want to make sticky while scrolling up and down. I applied some CSS styles to achieve this, and now the sidebar is sticky. However, the issue is that it keeps shifting its position from right to left. ...

phphtmlcsswordpress

encase the text within a div to create a visual flow

Is there a way to make div 2 encircle div 1? Both divs have text inside. +---++------------------+ | || | | 1 || | | || 2 | +---+| | +---- | | | ...

htmlcsstext

Using `std::bind(func, this)` with `std::packaged_task` inside a class

Here is a small snippet I have prepared to isolate my problem: #include <stdio.h> #include <future> #include <functional> class foo { public: foo(int a, int b) : m_a(a), m_b(b) {} int somefunc(int a, int b) { pri ...

c++c++11bindpackaged-task

How to Animate the Deletion of an Angular Component in Motion?

This stackblitz demonstration showcases an animation where clicking on Create success causes the components view to smoothly transition from opacity 0 to opacity 1 over a duration of 5 seconds. If we clear the container using this.container.clear(), the r ...

javascriptcssangulartypescriptangular-animations